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RedHat Linux is the industry 
standard operating system for 

web hosting & Internet services 
serving some of the world's 
largest & most complex web 
sites. RedHat Linux has the 
power, reliability & value for 


' 


money you have been looking for. 


Linux Special 


Celeron 667 MHz, 20GB UltraDMA Disk, 
128MB SDRAM, 5GB Bandwidth p.m 
RedHat Linux 0S 


Linux Professional 


Intel Pentium {Il 800MHz, 2x20GB 
UltraDMA Disks, 256MB SDRAM, 
15GB Bandwidth p.m 
RedHat Linux OS 


Linux Ultra I 


Dual Intel Pentium Il 1GHz, 2x18GB 
SCSI Disks running RAIDI, 512MB 
SDRAM, 35GB Bandwidth p.m. 
RedHat Linux OS 


from £199.99 


Microsoft Windows is the choice 
of many small businesses & 
large corporations. Ideal for 
MSCPs, MCSEs, Visual Basic 
programmers & projects that 
require ASP SQL or Office 

components. We manage 
hundreds of Windows servers, 
giving you confidence that your 
web server is in the best hands. 
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Windows Special 


Celeron 667MHz, 20GB UltraDMA Disk, 
128MB SDRAM, 56GB Bandwidth p.m., 
Windows 2000 or NT4 


Windows Professional 


Intel Pentium {Il 800MHz, 2x20GB 
UltraDMA Disks, 256MB SDRAM 
15GB Bandwidth p.m. 
Windows 2000 or NT4 


Windows Ultra II 


Dual Intel Pentium Ill 1GHz, 2x18GB 
SCS! Disks running RAIDI, 512MB 
SDRAM, 35GB Bandwidth p.m 
Windows 2000 or NT4 


from £99.99 


The Single Site Server is as easy 
to use as a virtual server, including 
all the features you are familiar 
with, but on a standalone 
dedicated web server that gives 
you the speed, scalability & 
redundancy that you have 
dreamed of. 


EE nT EE 
Single Site Special 


Celeron 667MHz, 20GB UliraDMA Disk, 
128MB SDRAM, 5GB Bandwidth p.m. 
Linux OS with Virtual Control Panel 


Single Site Professional 


Intel Pentium Ill 800MHZ, 2x20GB 
UltraDMA Disks, 256MB SDRAM, 
15GB Bandwidth p.m 
Linux OS with Virtual Control Panel 


le Site Ultra Il 


Dual Intel Pentium Ill 1GHz, 2x18GB 
SCSI Disks running RAID], 512MB 

SDRAM, 35GB Bandwidth p.m 

Linux OS with Virtual Control Ponel 
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from £99.99 


The original 'Web-in-a-box' 
solution for thousands of 
companies. Easy to use & 
easy to manage with the 
highest dedicated support level 
available. As a Cobalt True Blue 
Diamond partner, our customers 
benefit from the lowest prices, 
advanced sales literature & 
technical expertise. 


RaQ 4 128 


10.2GB Disk 
128MB SDRAM 
5GB Bandwidth p.m. 
Cobalt Linux 0S 


RaQ 4 256 


20.4GB Disk 
256MB SDRAM 
15GB Bandwidth p.m. 
Cobalt Linux 0S 


RAID RaQ 4 256 


2x206B Disks running RAID 
256MB SDRAM 
25GB Bandwidth p.m 
Cobalt Linux 0S 


www.dedicated-servers.co.uk 
sales@dedicated-servers. co uk 


from £199.99 


R MONTH 
When it comes to server reliability 
& performance, Sun Microsystems 
is the market leader. Sun servers 
are built around the Sun Solaris 
operating system & are ideal for 
customers who need a seriously 
heavy duty UNIX system. Sun 
Servers are also ideal for hosting 
demanding web sites, e-commerce 
enabled web shops, complex 
databases or Internet portals. 


Sun Netra X1 128 


Sun Netra X1 System, 400MHz 
UltraSPARC CPU, 20GB 7200RPM 
EIDE Disk, 128MB Memory DIMMS, 

Solaris 8 Installed, 15GB Bandwidth p.m. 


Sun Netra X1 512 


Sun Netra X1 System, 400MHz 
UltraSPARC-II CPU, 20GB 7200RPM 
EIDE Disk, 512MB Memory DIMMS, 

Solaris 8 Installed, 25GB Bandwidth p.m 


Sun Netra 


Sun Netra T) Server, 440MHz 
UltraSPARCHI CPU with 2MB External 
Cache, 18GB 10000RPM UltraSCS! Disk, 
512MB Memory, Solaris 7 Installed, 
35GB Bandwidth p.m 


from £99.99 


Locate your servers in our state 
of the art Data Centre. Simply 
choose between space for one 
server, a half rack or full rack 
of server space. We provide 
competitive bandwidth pricing, 
free reboots and an SLA. 


Co-location Special 


Rack space for your minitower 
or 19" rack server, 2 IP addresses, 
5GB Bandwidth p.m 


Co-location Professional 


Half rack/20 Us of 19" rack server 
space, 15 100Mb Switch Ports / 
15 Power Sockets, up to 30 IP 
addresses, 40GB Bandwidth p.m. 


Co-location Ultra 


Full rock/40 Us of 19" rack server 
space, 23 100Mb Switch Ports / 
23 Power Sockets, up to 60 IP 
addresses, 656B Bandwidth p.m 


dedicated 


For a complete solution to your Web Bane 
Plus package to your Dedicated Server. Avai 
offers outstanding value for money and total 


Firewall 


PLUS PACKAGE 


only 


£199.99 


requirements, consider the benefits of adding the 


peace of mind: 


able across all our Dedicated Servers, the Plus package 


The Dedicated Servers Firewall product allows customers to protect their machine against unwanted 
Visitors. Via. a web based control panel, you have the ability to allow or deny visitors based on rules 
that you sel. You can add any number of rules that you wish to your Firewall system 


Backup 


An important decision when choosing your Dedicated Server is considering how you will back up the 
data on your new machine. Even though we use the best hardware that is available for all our servers, 
the data on them may be lost. We strongly recommend 
our backup solutions using StorageTek tape libraries. This service includes: configuration of server side 


disks can occasionally fail, and in some cases 


backup routine, 10GB of 
recovery of data in the event of data loss. 


Advanced server monitoring 


ackup, tapes stored securely on site in a large fireproof safe, and free 


For customers who require a more advanced level of server monitoring, upgrade to our Advanced 


Server ners product. This product allows you to monitor any num 
net, POPS EMail, Web Server, FIP Server, Domain Name Server, Secure Web 
Ping. You may also configure any number of additional services and deci 


including: Te 


of a service failure, either EMail or SMS. Control this account feature in your Dedicated C 


er of services on your server 


Server, SSH, 


ide how you want to be notified 


ontrol Panel 


Available os standard with all our Dedicated Servers is our guranteed Service Level Agreement (SLA). 


We pride ourselves on the highest levels of customer service & quality assurance, which is highlighted 


in four benefits of our SLA 


30 Minute Reboot Guarantee 


Should your server stop responding, just visit our web based reboo! request 
form to get your server rebooted, within 30 minutes, 24/7, 365 days o year. 


99% Connectivity - Money Back Guarantee 


We guarantee that our network will be available at least 99% of the time. 


Prices Frozen - Forever! 


We guarantee never to put your prices up, ever, even if prices change for new customers 


Bandwidth Guarantee 


Unlike some of our competitors, we do not oversell bandwidth. At Dedicated Servers we p 
we have 1:1 contention ratio on bandwidth. This means that we will always have enoug 
to service every single customer at their full capacity 


pe >) 


warantee that 
bandwidth 


0870 012 6600 


PRICES EXCLUDE VAT AT 17.5% AND SETUP WHERE APPIICARIE AI] TRADEMARKS AcuNAWIENCEN conc 


@ CONTENTS 


% 


72 GoLive 6 


Create a site using Adobe GoLive 6 — we've 
got the demo on our CD 


78 Set up a Web server 


Setting up a Web server on your system means you 
can test your sites quickly and effectively. We explain 
the process and show you how 


Lip-synching in Flash el 


© Give your animated Web characters extra 
personality with our lip-synching tutorial 
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36 Lateral 


Behind the scenes at this award-winning London Web 
design outfit — plus a Web game tutorial 


A RECENT SMEY 4 
z 40 ONE IN FIVE OG! 
fe] Web Menu Builder AS LIVING ALORS 

The key new features of this hot Web design Build menus for your Websites with the ip 

application explored and explained full software on our CD 52 Fibre 


These guys have style, and they're pushing creative 
boundaries both online and in print 


3 ea 


© Eis Photoshop 7 © Eels Flash components 64 Kleber 


Master Photoshop 7 and ImageReady for the We show you how to create and control 


Join the quest for a classic style of Web design 
creation of Web graphics components for an easier life in Flash 


that wont go out of date yesterday... 


NAVIGATION COVER CD 
Find your way around — let Demos, movies and 
the colour guide you resource files on the CD 
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We blow away the hype about Website 
accessibility and explore all the issues 


How to create sites that make money online surrounding this hot topic 
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07 CD contents 


Find out what's on our CD, including our full 
products and demo software 


34 Subscribe! 


Save money when you take out subscriptions 
2 : to both Computer Arts and Computer Arts 


. z Special. Nice 
s; Fireworks MX 


An in-depth review of Macromedia’s latest If you thought Photoshop was the bee's knees, it 45 U pgra d e offe r 

release in the MX series. It now incorporates might be time to think again. Fireworks MX puts Get version 2 of Web Menu Builder by V-Tech 

UltraDev and has that hot MX interface itself forward as the only tool for Web graphics and benefit from a 10 per cent discount. Turn to 
this page and see the new features 


55 Competition 
46 Your 1510 Photo-Objects Win one of five copies of Toon Boom Studio, 


A guide to the 1010 PC and 500 Mac Photo-Objects, by the anin on creation tool for SWF. Prizes 
Hemera, that we've included on our CD. They're a great 


source of sped ans nies 77 = u bscribe to CAS 
86 Essential Web software Our special subscription offer for people who 


There are hundreds of Web design tools out there, want every issue of Computer Arts Special 
but which should you choose. Browse our mini-reviews 


celui 97 Back issues 
tS F Missed a magazine? Hurry and you might be 
2 iil : : 94 Choosing a Web host able to buy it here — while stocks last 
60 Understand PNG Hosting is a tricky topic. With our guide to choosing a 98 Next issue 


Web host you'll find out how much it should cost you, 
See how this up-and-coming graphics and what questions to ask before you commit The next issue of Computer Arts Special will 
format can make your sites more attractive feature Photoshop in all its glory 


THECOVERILLUSTRATION computer 


arts specialCONtENIs 
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Pick your web host wisely. 


With so many web hosts offering you so many packages and deals, it’s easy to fall prey to the wrong one. But how will 
you know if you've got the right one? As the UK's largest independent Internet Service Provider, Claranet guarantees 
you 24/7 support and a comprehensive range of packages. We include domain name registration, generous webspace 
and transfer limits, email re-direction and database options. You can be up and running with us for as little as £29.99 pa, 


or you can go for a fully featured, advanced solution at £822.00 pa, including VAT. You'll find our offer hard to beat. 
And that’s not spinning you a line. 


ISPA 
WINNER 


j | 

Best Nationa 

Business ISP 
f kis] 2002 


theinternetserviceproviderthatactuallyprovidesaservice www.clara.net/clarahost 0845 355 1000 


1510 
Of FREE 


¢ Need a quick source“UNages 


* of imagery for your 
site? Look no further 
than on our CD. We've 
got 1010 Hemera 
Photo-Objects on 
there for PC users, 
and a further 500 for 
Mac users. Turn to 
page 46 for a guide to 
the images on our CD 
[w] www.hemera.com 
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Web Menu Builder 2 (Pc) 


Try out the latest version 


Flash MX (dual) 


Use it to follow our tutorials on page 28 and 66 


webEdition 2 (dual) 
Try this Web authoring application 


Web Image Guru (PC) 


° Handy Web hics tool f tot 
Flash Components (dual) GoLive 6 (dual) pe ea age ine 


These Flash components by Eyeland normally sell This demo is brand new, so we just had to bring it to GraphicsDesk PC) : 
for $105 - but they’re free to you on our CD you. Follow ourtutorial starting on page 72 Access Hemera’s online image library 


Jarts specia 
tnteractive saint 
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HOME GAMES ANIMATION 8 


: ) % 
Web Menu Builder- 


i é ; FULL PROGRAM: design cool menus for your Websites 
os Copyright (c] 2001 Visionary Tech >. All rights reserved 
= | wise si 
wo This program is protected by n rational copytight laws Of Ph Ob 
ney 1,510 free Photo-Objects 
= CHemera’s royalty-free images - 1,010 for PC and 500 for Mac 
« TheWeb Optimizer compresses Web Pages which accelerates your web site without 


changing your site appearance 


s 

Also on the disc... 
m Three Flash components worth $105 - by Eyeland sua 
i Brand new demo of GoLive 6 ~ try the new features dus) 


‘Also on the CD: Web Image Guru (PC), Freeway 3.5 (Mac), Web Menu Builder 2 (PC) and Web Optimizer (PC) 


The Web Optimizer 1.0 was release in February 2002 


Freeway 3.5 (Mac) Web Optimizer (dual) 


lf you’re used to DTP layout tools, this is the Web From the makers of Web Menu Builder 1, an 


design application for you. Try out the demo application that will crunch the code in your site For full listings and contacts, see your CD inlay card. For free 


downloads go to [w] www.computerarts.co.uk. 
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Dreamweaver MxX (2.8 


It's the favourite Web authoring package, but does v6 pack a punch? 


£351 , 
Upgrade £175 


* Drag-and-drop Web authoring 


© Web application development 
* Improved coding environment 
* ColdFusion-optimised 


Support for PHP, JSP, ASP.net 
and ColdFusion 


* Macromedia Mx interface 

* Extensive reference materials 

* Tag editors and inspectors 

© Tag completion 

© New Insert panel 

* Repeating regions in templates 
* Design time Style Sheets 

* Test applications locally 


PC: 300MHz Pentium Il © 96MB 
RAM ¢ 275MB hard disk space ¢ 
Win 98/2000/ME/NT4/XP 


Mac: PowerPC * 96MB RAM ¢ 
275MB hard disk space * OS 9.1 
or OS X 10.1 
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ven if you’re new to Web 
design, you probably already 
} i] know that Macromedia 

| Dreamweaver is the 
designer's choice of Web authoring 
application. It outsells all its rivals — 
apart from Microsoft FrontPage, which 
appeals more to corporate users than 
designers, and is bundled in with 
the company’s ubiquitous Office suite 
of products. 

From version 1.0, Dreamweaver has 
possessed visual layout capabilities 
that few other products could compete 
with. Over time, Macromedia has 
introduced welcome upgrades to this 
original model, bringing in Roundtrip 
Code and Layout Tables, integrating 
CSS editing features and improving 
the manual coding features. The 
standard drag-and-drop metaphor 
has changed little throughout this time. 
Dreamweaver's key tools have always 
been in the Objects panel, where you 


could find page elements and the 
| Property Inspector that enabled you to 
| change the parameters of those 
| elements in your page. 
Dreamweaver UltraDev started 
out as an addition to the product range, 
at first appearing to some users like 
| a hasty attempt to catch up with the 
Web application capabilities built into 
| Microsoft FrontPage. Dreamweaver 
| UltraDev 4, a tool that put the power of 
| Web application development into the 
hands of designers, quickly replaced 
this first incarnation. Now, with the 
release of Dreamweaver MX, the two 
branches of the product line have 


merged into one — creating a powerful 
application that combines elements 

of recent Macromedia acquisitions 
ColdFusion Studio and HomeSite 
within a familiar environment. Excited? 
Well you should be. 

The standard Dreamweaver package 
is now a fully fledged Web application 
development environment, and it's 
quite simply unlike any other tool on 
the market. It can produce database- 
powered Websites using the Active 
Server Pages protocol, ColdFusion and, 
at last, PHP It also boasts a brand new 
interface. No, not a tweaked interface 
ora couple of new panels — a look 


Mx boasts a brand new interface 
—a look and feel that's been 
redesigned from the ground up 


Dreamweaver MX -[random*out let (randormoutlet/index. himt*)] 


@) File Edt View Insert Modify Text Commands Site Window Help 


| Behaviors 


QEse siyes 


navigation 


previous entries 


what is this? 


sign guestbook 


read guestbook 


home 


Journal: On Trains 


The train doors open and like the shuffling automata in ‘Metropolis’ we trudge towards them. People get 


primal when they're using public transport, Those in pairs and groups use unspoken alliances to gang up on 
the it, king blocking manoeuvres to secure maximum space. Those alone (i.e, me) have to take what 
craps they can after the ruck. Still, there’s one fundamental flaw in the hive-mind that evolved sensibilities 
can tak: antage of, Most drones are programmed into thinking that getting @ seat with a table is the 


timate train travel goal. 


hey’re wrong. 


Xf you're on your own, or even in a couple, the table seat is one of the least comfortable options availabl 
i 


person on their own will inevitably find the: 


elves trapped into a corner, doomed to read the same 


in their magazine for mile after mile as the usurpers stray into and then successfully steal all their personal ; 
space. They will lay out a picnic on your table, use your armrest without fear of reprisal and pile their bags 
As 


tonto your lap, Howey 
Jumbers aboard the 
that points in the 


the plebeian lust for a tabi. 
in, fixated on their Formica 


it can be turned to your advantag: 
you should plonk yourself in the firs’ 
ion of travel. If possible, you should secure the aisle seat, If this me 


to a seat that’s already occupied, accept the inevitable and take it anyway. The aisle seat facing in the 
F | 


of travel offe 
ving you th 


ua full two feet of space on one side of your body (commonly referred to as the 
dom to leave your seat without i 


cting with others at any time you wish, 


Macromedia Dreamweaver gets the full MX treatment in this latest version, with Panel Groups that enable you to organise frequently used windows, 


plus dockable panels and new layouts. 


The Macromedia MX interface 


Dreamweaver is part of the newly launched MX range, and shares many of the product line's interface features... 


Dreamweaver MX 


The Insert menu is an 
expanded, renamed and 
revamped version of the 
Objects panel. It now 
features tabs dedicated to 
working with templates, 
applications and scripts. 


‘download: 


icalmest sea 


[Twain (twain’ 


songs © fwain 2002 


Improvements to 
templates through 
Dreamweaver MX are 
reflected in anew 
Template panel in the 
Insert menu. Now you can 
drag and drop editable 
areas, repeating and 
optional regions directly to 
the document you're 
working on. 


+ Properties 


a LayourTable Width @)Fied [750 | Helge 22) 


O Astosuech 


By J) Catspnce | 


The Properties Inspector started life in 
Dreamweaver, but is now a consistent feature 
throughout the MX range - Fireworks MX and Flash 
MX. It can be floated or docked along the bottom of 


the screen. 


Templates have been overhauled 
to make them more suitable for 
use with dynamic data... 


and feel that’s been redesigned from 
the ground up. 


Starting up 


When you start Dreamweaver MX for 
the first time, you may wonder where 
the Objects panel is. Take a look at 

the top of the screen, just below the 
standard menubar, and there you go; a 
tabbed, horizontal sub-menu. Take a 
look under the Window menu and you'll 
see that this is called the Insert menu 
— presumably because not all the 
elements you can access from here are 
objects. Most of the tabs have familiar 
names, a couple are new, some have 
been moved from other parts of the 
interface. You'll find the default sets 

of common HTML objects here: Head, 


Forms, Frames and Characters. There's 
now a separate tab for Layout controls 
that includes access to the Table and 
Layers objects in Standard view, and 
Layout Tables and Cells in Layout View. 

The innovative Layout tables 
introduced in the last version are still 
here and work in much the same way, 
making it easy to quickly put together 
faultless pages. The only differences 
are that there are now more ways to edit 
the parameters once they're in position, 
and the icons to activate the feature are 
in a separate Tables tab. This enables 
you to define a table using the standard 
dialog whether you're in Standard or 
Layout mode. 

The Script tab gives you access to 
the JavaScript editing window that > 


cara[ | foe 
[_] “fel 


+ Design 


» Application 
> Answers 


Tile? bo 


aa remem bered hillg 


The MX interface introduces 
Panel Groups — a collection of 
themed panels. Group names 
can be edited, panels can be 
transferred between groups, 
and the groups themselves can 
be docked to the sides of the 
screen as well as each other. 


The Tag Inspector works in 
either Code view or Design 
view, enabling you to edit any 
parameter of a tag, add scripts 
directly or even specify 
dynamic content with that tag. 


The big news is that UltraDev and Dreamweaver are no longer separate product lines. 
Dreamweaver MX continues from Dreamweaver UltraDev 4, rather than the plain vanilla 
version. That’s reason enough for anyone to upgrade. 
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was once hidden in the Invisibles 
section, and also has the Server Side 
Include object that was so easy to 
overlook when it was located alongside 
Common elements. Some of the tabs, 
such as the Applications tab and 
Templates tab, are there to service 
features that we'll come to in more 
detail later. 


Development process 


DW Mx is a more complex tool than its predecessors, but it compensates for this with a streamlined development process... 


@ When your site is set up you can start 
to add pages. Going to File>New 
opens a revamped dialogue with a list of 
document types, ranging from basic HTML 
pages through to dynamic documents with 
scripting options and layout templates. 


The new Insert menu is part of a 
much wider interface overhaul. This is 
Dreamweaver MX not Dreamweaver 5, 


ColdFusion Mx is 


In our review of Dreamweaver UltraDev, 
Computer Arts predicted that the next 
version would be heavily biased towards 
ColdFusion. Dreamweaver MX offers the 
best visual support for authoring with 
ASP, JSP and PHP there is on the market. 
The support for ColdFusion is in another 
league, though, and far exceeds what we 
could have expected. 

The Applications group features a 


Components panel that is aimed at making 


ColdFusion authoring easy for designers. 
Using drag-and-drop elements, you can 
put together rudimentary ColdFusion sites 
with the minimum of tweaking. There's 
also a Live Server debugging panel for 
ColdFusion, default site templates and 
database visibility features which enable 
you to connect to a server and view the 
contents of a database. On top of this, 


many of the new features in Dreamweaver 
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2] Dreamweaver has been XML-savvy 
since Dreamweaver 3, when the code 
base was shifted to a model that could be 
customised using XML and JavaScript. 
Now it can write XML documents. Take 

a gentle step in this direction by ticking 
‘Make XHTML Compliant’ in the New 
Document dialog. 


and the MX interface that first debuted 
in Flash MX — also part of Fireworks 
MX and the latest ColdFusion —is 
evident here. You get dockable panels, 
roll-up panel-hiding features, and the 
ability to float any window. The main 
panels are arranged into Panel Groups, 
tabbed collections of related panels. 
Although you can't create your own, 
you can rename the existing groups, 
you're able to tear individual panels 
from a group or add them to another 


coming 


Dreamweaver MX will have a shallow 
learning curve for those familiar with 
Coldfusion. The integration is massive. 
Mx, including the Tag Inspector, will be 
very familiar to ColdFusion developers. 
Macromedia is in an enviable position 
with this release. ColdFusion was already 
the number two application server before 
the Macromedia buy-out. Now, with a 
development tool as robust as DW MX, 
plus the extended capabilities of the 
simultaneously released ColdFusion MX, we 


could be seeing more of this combination. 


3) If you need to rapidly develop layouts 
you'll appreciate Image Place Holders. 
Insert them into pages just as you'd place 
regular images. The main difference is that 
you don't need to associate them with a 
file. This is ideal for templates. 


group. This gives you a great deal of 
control over how the workspace looks, 
and you can tailor it to the task at hand. 
Unlike Flash, however, there's no feature 
enabling you to save Panel layouts. This 
omission seems unusual considering 
that the facility is built into the software. 

If you go to Edit>Preferences, then 
click on Change Workspace, you can 
choose to work with a standard 
Dreamweaver MX layout or a 
HomeSite/Coder-style layout. You 
can also choose to work with a 
Dreamweaver 4-type windowed 
workspace. In this mode, the tabbed 
Insert panel reverts to a vertical 
toolbar, and all Windows are free- 
floating. On the Mac version, windows 
are always free-floating; in Windows 
the MX interface is contained within a 
larger window. 


4 | There are now several ways to directly 
edit Tag attributes. You can use the 
Property Inspector, the Tag Inspector, 

edit manually in Code view or right-click 
(Ctrl-click on the Mac) to open a Tag 
Editor. You've never had it so good. 


Making space 


The philosophy behind the MX 
interface acknowledges that 
Macromedia's Web range is now 
mature. It’s been through several 
revisions and had lots of functionality 
built in along the way. The MX interface 
enables the continual addition of new 
primary functions and features, without 
cluttering up the screen. Dreamweaver 
MX boasts some significant additions, 
but if anything, it looks far more 
streamlined than its predecessors. 
Among the new panels you'll find the 
Site panel. This incorporates all the 
features of the old Site view, but in 
the MX interface you can now see it 
alongside the page you're working on, 
docked with the other panels. If you 
prefer, you can tear the panel from its 
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Incorporating the best features from HomeSite, Dreamweaver's code-editing capabilities finally 


match its visual layout features. 


King of code 


Dreamweaver'’s layout features have always been a focus. In DW MX, drag-and-drop coding takes centre stage... 


Image Placeholders are 
among the new objects 
that can be added directly 
to your pages. You use 
them exactly as you use 
regular images, then 
when they're replaced 
by the real deal, the 
image adopts the 
parameters you defined 
for the placeholder. 


Dreamweaver MX - [Details about the employes (Compe 


Fils 8% View Insert. Mody. Text Command: “Ste Window ot 
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ae DIRECTORY DETAIL PAGE 


= 


= Code Inspector 


| Code Inspector 


&. @.| Ce 0.12, 
<html> 
<head> 
<title>Details about the employee</title> 
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Start typing code in the Code Inspector 
or Code view, and Dreamweaver MX will 


ets E: Deer ee saints 7. ASP data objects can be 


dragged directly to the page, 
including DataGrids, DataSet 
and DataList elements. 
Support for ASP.net Web forms 
is also available. 


The Snippets panel within 
Dreamweaver MX is an idea 
imported from HomeSite. Here 
you can store any useful or 
reusable bits of code, 
JavaScript elements, HTML 
fragments, as well as Server 
Side scripting. 


Welcome to the Reference panel. This panel provides reference information for the 
‘various languages you can develop with in Dreamweaver MX. including HTML, 
JavaScript, ASP, JSP, and CSS, 


To get reterence information for the current selection in the Code view, ensure that 
Spptax Ft poe elcaberolacmeng 


Dynamic HTML: The Definitive Reference, writen and copgighted by Oanng 
‘Goodman, is the source of information presented in the HTML section of the 
Reference panel For additional information visit O'Reilly Books Oniine at 
hhtpsataricreily.com 


The Reference panel has been expanded since 
Dreamweaver 4, with full ASP and Coldfusion 


prompt you with pop-up Code Hints. 
These can be turned on and off, but are 
invaluable when editing complex scripts. 


dock and open it into a full window. DW 
veterans will breathe a sigh of relief 
when they see that you can now access 
your computer's desktop from the 
Local View of the Site panel. No more 
switching to the Finder or Windows 
Explorer to drag in assets you forgot to 
add. The Site panel shares a Panel 
Group with the Assets panel, which now 
includes a tab to access Templates. 


Revamped templates 


Dreamweaver has traditionally taken a 
blank canvas approach to Web design — 
clicking on File>New simply opened a 
new HTML document. Now, the New 
document dialog reflects the complexity 
of the package, giving you the option of 
creating a series of document types, 
from basic HTML pages to Library items, 
CSS style sheets, scripts or pages with 
dynamic content. 

Move down the list a bit and you'll 
find that DW MX does something 
previous versions have never done — 
it gives you ready-made templates to 


base your site on. Before you start 
thinking about the garish layouts that 
MS FrontPage and NetObjects Fusion 
can be guilty of, these templates are 
bare-bone layouts designed to be 
customised by a designer. You won't 
find any wooden buttons or chrome 
logo’s here — just plain HTML and 
JavaScript information designs. 
Templates have been a mainstay of 
the app since v3 — now they've been 


You no longer have to define sub-sets of 
records in order to use them. Freely browse 
through the structure of a database to find the 
information or records you need. 


references included. The panel can be 
launched contextually, as you're working on 
the appropriate code... 


overhauled to make them more suitable 
for use with dynamic data. To make a 
template editable you must select an 
area to create an editable region, but 
these regions can now be set to repeat 
or be flagged as optional. Repeatable 
regions let content providers add 
multiple items to a document, while 
maintaining the same basic layout 
imposed by the designer. Optional 
regions are areas of content that can 


There are some differences between the Mac 
and Windows versions. Some features of the 
MX interface rely on Windows MDI 
functionality, so the Mac’s panel docking 
abilities are less pronounced. 


be turned off by the author. You can 
also configure a template so that only 
specific tag parameters can be edited, 
enabling you, for example, to let a 
source image be changed while leaving 
its dimensions fixed. 

Templates can be nested within 
each other, which turns out to be quite 
useful. If you have a site with a 
navigation layout but several different 
content styles, you could create a > 


The under-used Macromedia Dashboard gets 
replaced by the Answers panel, complete 
with hardwired links to tutorials, Help files 
and the Macromedia Website for updates. 
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Results, asp 
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The Site window has been replaced by a 
panel that can be left docked or torn from 
its mooring and resized accordingly. A 
smaller tweak means that you no longer 
have to go to the Define Sites dialog to edit 
site parameters — you now choose Edit Site 
from the Site menu. 


HomeSite+ 


When Macromedia acquired Allaire’s 
ColdFusion, it also acquired 
HomeSite, the HTML coding 
package that shipped with previous 
versions of Dreamweaver. With all 
the enhancements to the coding 
tools in Dreamweaver MX, you might 
think that HomeSite would be the 
first casualty of the overhaul, 
especially as many of those features 
were inspired by HomeSite in the 
first place. However, HomeSite is 
back in the Windows version of 
Dreamweaver MX, and it’s bigger 
than ever. HomeSite+ is an 
amalgamation of two packages, 

the original HomeSite HTML editor 
and ColdFusion Studio, Allaire’s 
scripting tool for the ColdFusion 
Application Server. 

With closer integration between 
Dreamweaver and HomeSite, it’s 
possible to switch between the two 
while you work, To be frank, though, 
it's difficult to see what real benefit 


the tool presents to anyone but 


hardcore ColdFusion Studio coders 
who are reluctant to move to 
Dreamweaver. And that probably 
explains its inclusion — like the 
option to switch to a Dreamweaver 4- 
style interface, HomeSite+ is there to 
placate more stubborn coders whod 
rather have a scripting environment 
stripped of the bells and whistles 
offered by Dreamweaver. 
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To use dynamic data on this page: 


¥ 1. Create a ste for this file 

2. Choose 2 document type, 

3. Set up the ste's testing 
seceer. 


‘ode FA Please choase the workspace layout you're most comfortable with You can swatch 


Seen ees i 


Chick Update te conneot to 
Mocrommeda.coen and get the latest 


If all these changes prove too overwhelming for you, switch toa Dreamweaver 4-style floating 
layout. We think the new interface is well worth persisting with... 


template with the navigation in first, 
then use that as a basis for creating 
further templates to accommodate 
different kinds of content. If you then 
need to change the navigation system, 
you simply tweak the original file. 


Cascading Style Sheets 


The default method for applying 
formatting to text on the Web has 
become Cascading Style Sheets, and 
this is reflected in enhancements to the 
way Dreamweaver MX handles them. 

The CSS panelis still here, and 
works ina similar way to before, 
although there are some additions 
from the CSS2 specification that didn't 
make it into the last version. A main 
difference is that you can now switch to 
Edit Styles mode within the CSS Panel, 
then select individual styles to edit on 
the fly, bypassing a couple of dialogs. 

You can switch the Property 
Inspector into Styles Only mode, 
getting rid of the pesky old HTML 
definitions and <font> tag for good. In 
this mode you can apply styles you've 
already made, or use the dropdown 
menu to create or edit styles. CSS 
script editing also benefits from the 
package's more catholic approach to 
code editing. You can now manually 
produce external Style Sheet scripts 
directly within Dreamweaver'’s Code 
view using a range of new tools. 


Code cruncher 


Dreamweaver has always been a visual 
design environment. So little was 
wrong with the original authoring tools 
that they remain relatively unchanged 
since the first release. The package's 


coding tools have undergone a gradual 
evolution, though, and in Dreamweaver 
MX this has reached a peak. The 
program can now be launched with 

a special code-editing layout, using 
familiar tools like the Site panel to work 
with the code directly. The Code view 
that debuted in Dreamweaver 4 is now 
a multi-purpose coding environment — 
you can edit HTML there, but you can 
also tweak your ASP scripts, write 
ColdFusion from scratch and develop 
CSS Style Sheets manually. 

This is made far easier by the 
inclusion of a new Tag Chooser panel. 
In common with HTML crunching tools 
like HomeSite, the panel enables you 
to apply tags directly to the content in 


There's no need to exit the package to 
manually edit external style sheets now — 
there's support for a variety of document 
types directly within Dreamweaver. 


your page. Used in tandem with the 
new Tag Inspector panel which allows 
you to edit code parameters directly, 
Dreamweaver is now every bit as 

good with the code processing side of 
things as it is with its drag-and-drop 
capabilities. The Tag Inspector/Chooser 
combo doesn't stop at HTML, either. 
The chooser has a library of ASP 
ColdFusion, WML, Jrun, JSP and PHP 
tags as well — making this release a 
truly integrated coding platform. 


Enter UltraDev... 


Dreamweaver has been built around 
XML since Dreamweaver 3, but 
Dreamweaver MxX is the first version 
you can use to actually create XML 
files. This is largely a task that takes 
place in Code view, but the hierarchical 
tree arrangement in the new Tag 
Inspector palette is what makes it 
possible. This lets you select tags 
that are active, then delve into them 
and edit their properties. 

Most of these changes are in line 
with the amalgamation of Dreamweaver 


Another idea from HomeSite, code Snippets are ready-made HTML or JavaScript elements that 
can be dropped directly into you pages. You can then edit them as. required. 


Setting up sites 


‘What wade you Re to name your ste? 
mem 


Eramgie MySite 


Choosing New Site from the Site 


up. If you're a more advanced user you 
can still create sites in the usual way, but 
you'll find some new options. 


menu launches a Wizard-based set- 


Creating a new site has been made much easier for beginners... 


The URL Pte the cation ofthe sels 
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As well as Remote and Local 

servers, you can now specify a 
testing server. This is an inspired idea for 
application development, enabling you to 
set up paths for publication to the remote 
server at development time while testing 
the functions of your site locally. 


Now we have a visual editor that 
is every bit as competent with 
code as it is with layouts 


and Dreamweaver UltraDev product 
lines. Formerly a separate package with 
all DWs layout power and the ability to 
build database-driven dynamic Web 
sites, the new version has a solid 
foundation to build on. Macromedia 
acquired the ColdFusion application 
server from Allaire last year, and DW 
MXis unashamedly optimised for it. In 
turn, the ColdFusion server has now 
been revamped: it’s a cross-platform, 


“Sopaahines Kinine AAStc ing = ne ep 


Java-based solution to Web application 
development. This doesn't mean that 
Dreamweaver MX doesn't cater to other 
languages or protocols — it supports 
PHP scripting for the first time and 
ASPnet. Many of the features we cover 
in this review have been brought in with 
dynamic scripting in mind. The Tag 
Chooser includes ASP, PHP and CFML 
(ColdFusion Mark-Up Language) 
libraries, the New Document dialog has 
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Use Dreamweaver to create XML files, with full access to all their functions and features in the Tag 
Inspector. Define local DTDs or Schema, or connect to remote copies. 
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3 | You'll notice more options to choose 
from, including varieties of ASP.net 
and PHP. An option to switch between 
UltraDev 4 and Dreamweaver MX pages 
ensures that you can migrate sites easily 
from older versions. 


a collection of dynamic templates for 
use with Web application development. 
Application objects can now be 
inserted into pages from the Insert 
menu, enabling you to visually build 
dynamically driven pages. 

The old Data Bindings panel has a 
new home ina Panel Group labelled 
Applications, which sports a Databases 
tab that enables you to freely browse 
the structure of a connected database. 
In the old UltraDev you had to add 
recordsets to see inside them. The 
Reference panel has been updated 
to reflect the expansion in language 
support, with full coverage of ASP JSP 
and CFML scripting. A PHP guide 
would have been welcome too, and we 


Companyinfo 
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COMMENTS | 
COMMENT_ID (COUNTER 4 Not Nulf}) 
FIRST_NAME (VARCHAR 100) 
LAST_NAME (VARCHAR 100) 
TELEPHONE (VARCHAR 40) 

EMAIL (VARCHAR 100) 

COMMENTS (LONGCHAR 21474836) 
ANSWERED (BIT 1 Not Null) 

REGION (INTEGER 4) 

DEALER 

LOGINS 

REGION 

Views 
Stored Procedures 


Database connectivity has been expanded to 
include PHP and MySQL support. This means 
that Mac users can develop Web applications 
in Dreamweaver directly from their desktops 
for the first time. 


~Ci8 2 BO 


4 | The Site panel is docked in a group 
alongside Assets. You'll notice that 
in Local view you can now access the 
desktop of your computer, conveniently 
enabling you to locate and transfer 
resources from elsewhere on your hard 
drive to the Site window. 


can only assume that one will soon be 
available from the DW Exchange. 


Bloody brilliant 


The wait for the new Dreamweaver has 
been worth it. This version still has all 
the superlative features that made the 
package so attractive to Web designers 
in the first place, and most of the 

best features haven't been touched. 
Macromedia has enhanced exactly 
those aspects of the program that 
needed it, and now we have a visual 
editor that is every bit as competent 
with code as it is with layouts. As 
designers, the changes to the template 
system and comprehensive interface 
updates will be the first aspects you'll 
notice. In the long term, Dreamweaver 
MX’s development features may be 

the catalyst that gets you building the 
dynamic Websites you always thought 
you needed someone else for. This is the 
complete Web building package. FEES 


Verdict 
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For: Integration of UltraDev 
into Dreamweaver product 
line ¢ Coding enhancements 


© Mx interface 


Against: No HomeSite+ in 
Mac OS X version 
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Macromedia Fireworks MX 


Macromedia's multi-faceted Web graphics app gets the MX treatment... 


Price 


£257 (upgrade £128, 
MX Studio £692) 


Company 


Computers Unlimited 


Telephone 


020 8200 8282 
Website 
www.macromedia.com 


Features 


Interactive and animated 
Web graphics 


* Vector, bitmap & HTML toolset 
¢ MX-style reduced interface 

¢ Improved bitmap tools 

* Live, editable bitmap effects 

¢ Library, symbols & instances 


* Slicing, image swaps 
and imagemaps 


* Pop-up menu creator 
© Tweening 


* Data-driven graphics 


PC: Pll 300MHz * 64MB RAM 
© Win98/2000 


Mac: PowerMac G3 * 96MB RAM 
© OS 9.1/OS X 10.1 
¢ 275MB HD space 
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hile Dreamweaver and 
Flash blow raspberries at 
the opposition from a 
safe distance, Fireworks 
MX is pitched against the greatest 
design application: Adobe Photoshop. 
This isn't a fair fight — Photoshop 
attracts a feverish following; it would be 
easier for many to eat nails than switch 
applications. For those stalwarts we 
have a message: Fireworks does Web 
graphics better than Photoshop. There, 
we said it. We uttered the unutterable 
and weren't struck down by a vengeful 
lens flare, so it must be true. 

Fireworks outperforms Photoshop in 
the Web graphics arena by sticking to 
what it does best. Combining vector 
drawing, bitmap editing and image 
effects with a series of built-in HTML 
behaviours and top-of-the-range 
image optimisation features, it 
outperforms Photoshop on many of 
these fronts. And that’s before we even 
start talking about the upgrades. 


That interface... 


Of all the new apps to bear the MX 
interface, Fireworks suits it best. The 
Property Inspector that started its life in 
Dreamweaver has been applied here to 
dazzling effect, replacing six panels 
that could clutter up the workspace in 
previous versions. The Property 
Inspector does this by changing in 
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Fireworks MX benefits from an interface overhaul that improves workflow, banishes clutter and 
makes things easier to customise. Panel management tools include Panel Groups that can be mixed 


and matched as you like. 


context with the object that’s currently 
selected on screen, giving you access 
to the functions that were once spread 
over the Object, Fill, Stroke, Effects, 
Options and Info palettes. There are 
times when this doesn't seem to work 
quite as well as it should, though. 

The Effects panel is essentially still 
there, but it’s been reduced toa dialog 
that appears when you click on the Add 


rie Be Be Ye 


Working with bitmaps or vectors is seamless. Fireworks silently switches from one to the other, 
changing the properties of the selected tools as necessary as you change between them. 


effect icon. There's nowhere to click OK 
when you're done editing, which seems 
like a conceptual oversight. Similarly, 
the Fill Options interface doubles up 
clumsily within the Property Inspector. 
Selecta filled object and you can 
choose within the inspector what kind 
of fill to apply from a drop-down menu. 
Select Fill Options from the bottom of 
that menu and you're presented with 
the same tools again, with the 
exception of a button to edit the 
colours in the fill. Surely it would have 
made more sense to put that Edit button 
on the Property Inspector? These 
criticisms don't detract too much from 
what is otherwise a successful overhaul 
of Fireworks’ look and feel. From the 
space-saving Property Inspector to the 


Need to create banner ads in multiple 
languages? Or generate headlines using 
graphics? The Data-Driven Graphics Wizard 
can be used to replace variable text within 
Fireworks files with content from an XML file. 


The features that stand out 


Fireworks MX works harder on bitmaps than before, with an interface that makes it all easier... 


Macromedia Fireworks MX - final.png 


The Select menu contains all 


Fireworks gets the MX 
the commands you need for treatment, with Panels 
working with Marquee and that can be arranged into 
Magic Wand selections. No groups, docked into the 
need to search through the interface and hidden as 
Modify Menu anymore. required. Fireworks 


also lets you save Panel 
layouts, like Flash. Pity 
this idea wasn't extended 
to Dreamweaver. 
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New tools to interactively work 
with bitmaps have appeared in 
the toolbar. You can now Blur, 
Sharpen, Smudge, Dodge or 
Burn bitmaps, enabling greater 
control over which parts of an 
image to work on. 


Panel Group, Docking and Roll-Up 
features common to all MX apps. 
Text processing benefits most from 
its liberation from the tyranny of the 
dialog box. You can now edit text 
directly on screen using the Property 
Inspector to apply formatting and 
effects. The degree of flexibility 
available will have Photoshop users 
gaping slack-jawed in envy as you 
rotate, skew, resize and add effects to 
text without so much a nod in the 
direction of a bounding box or the 
slightest recourse to rasterisation. 


As before, you can export animations from 
Fireworks in Shockwave Flash format. Now 
you don't need to go to the Export dialog, just 
click on the Quick Export link to open a menu 
listing formats that can be exported direct. 
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Vintage 


Indulge yourself by traveling in a Vintage 
Classic automobile, with a chauffeur to 
whisk you to any destination. 


Change the text label on a button right here in the 
Property Inspector. You'll no longer be asked 
whether you want this action to apply to other 
instances of the same button. At last, common 
sense prevails. 


Overdue tools 


The MxX interface is big news across the 


whole range, but Fireworks’ most 
eagerly awaited improvements are in 
the toolbar. The program has always 
been strong on vector drawing 


capabilities within the narrow 72 dpi/ 


RGB specifications required for Web 


graphics production. You can still draw 


primitive shapes of all types, create 
graphics with the Pen tool and edit 
curves easily. Vector shapes can have 
any of the 50 plus filters applied to 
them in real-time, non-destructively. 


Text can be edited directly within the 
Fireworks document, with a much greater 
degree of flexibility than Photoshop offers. 


> Frames and History 
> Answers 


The Property Inspector changes 

to reflect the parameters that are available 
to the current selection. Although many of 
the original Panels are still available, this 
addition makes many of them redundant. 


You can go back and tweak just about 

any effect to your heart's content. 
Previous versions lacked some of 

the more interactive bitmap editing 


editing packages. Fireworks MX 
rectifies this with the introduction of 
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The pop-up menu wizard is now easier to use and exports cleaner, leaner code. A tabbed dialog 
enables you to edit how your menus look, and where they'll appear relative to the selected item. 


tools we've come to expect from other 


Blur, Sharpen, Smudge and Colour > 
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Creating code 


Fireworks has suffered in the past from CCC — Clumsy Code 
Creation. That began to change in version 4 with an export 
options dialog that enables you to change the way it outputs 
HTML. The plethora of options available make it easy for you to 
select the style of HTML you wish to output and define how 


Areas, 'f 


Wastc> ok 


ay With the introduction of the Property 
Inspector, the Fireworks design 


image slices should be named on export. Those options can 
then be set as defaults so that you can output HTML to your 
heart's content after you've set things up the way you like. Of 
course, Dreamweaver MX can handle Fireworks’ native code. 


There's even an option on Dreamweaver's new Insert menu that 


Copy HTML Code 
Update HTML 


ts It's possible to design a complete 
layout, including dynamic functions 
like pop-up menus completely in 
Fireworks, When you're ready to export 


lets you drop Fireworks-generated files direct into your pages, 
making it a breeze to insert the pop-up menus and rollovers 
Fireworks makes. And now exporting code to other 
Macromedia packages is that much easier with the debut of 
the Quick Export menu — similar to the one found in Flash MX. 
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Fireworks Behaviours don't seem to 


environment now feels more fully 2 | Text and URLs are no longer 
integrated. All the tools can be configured persistent across individual instances 
without launching additional panels, of the same symbol. When you change the 
whether you're drawing, adding text or 


them, you can now go to the Quick Export 
menu, and export directly to 


have changed much, but the code has 
been tweaked from the last version so that 


editing bitmaps. 


edia Fireworks MX 


03_74_07._05_54_20PM. jpg 


Creative 
Data-Driven Graphics Wizard 
Document 


Panel Layout Sets 
Reset Warning Dialogs 
Resize Selected Objects 
‘Web 


main symbol that they're derived from, 
only the graphics and styling are updated. 


Dodge/Burn tools. Although many of 
these capabilities were already 
available using filters, you now have the 
precision of an interactive tool to work 
with. This is complemented by a new 
Select menu. In previous versions, the 
features that enabled you to manipulate 
Marquee selections were buried under 
Modify>Marquee. There's little new 
here — an option to save selections 
direct to disk is about it — but it’s handy 
to have all these features in one menu. 


Like its Web building cousins Flash And Dreamweaver, Fireworks MX can now be extended using 
behaviours downloaded from the Macromedia Exchange. 
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Dreamweaver. You can also output to 
Flash or Freehand. 


Symbols have been the element of 
Fireworks that sets it apart from other 
Web graphics editors. These enable you 
to create buttons or graphic elements 
that can be reused throughouta site, 
dragged and dropped into place from a 
Library of assets. It’s now easier to 
apply different text and URLs to 
different instances of the same button. 
When you tried this in Fireworks 4,a 
dialog box interrupted you. 

Textual content has had an overhaul 
throughout. Check the Commands 
menu and you'll find that you can pull 
text from a XML file using the Data- 
Driven Graphics Wizard. This is for 
hardcore users, enabling you to revamp 
existing layouts with new data from an 
XML reference file. With improved 
integration between Dreamweaver and 
Fireworks, the XML data source can be 
edited in the former before being used 


If you take over a project late in the day, or 
have mislaid the source files, Fireworks MX 
can rebuild them for you from a standard 
HTML file. It parses the file in a Fireworks 
document, complete with slices and layers. 


your pop-up menus and rollover buttons 
work exactly as you expect them to. 


to generate new layouts, complete with 
hotspot and slice information. 

Although Fireworks has long been an 
underrated tool, it does everything a 
Web designer needs. It creates 
graphics from scratch using vector 
drawing tools, edits bitmaps, makes 
buttons and menus that can be plugged 
straight in to Dreamweaver, exports 
clean custom code and optimises 
images in all the major formats. This 
version sticks to those few basics, 
streamlining the process ratherthan 
cluttering up the interface with 
extraneous bits and bobs. If you already 
use it, you'll know how great it is. If you 
don't, then give it a go. You might be 
surprised how flimsy your allegiance to 
the package your using now is. FEES 


Verdict 
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For: Excellent vector tools and 
effects ¢ Data-Driven Graphics 
Wizard © Wide range of Import/ 
Export options 


Against: Weak bitmap editing 
compared to Photoshop ¢ No 
improvement to SWF export 
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\\, ADSL Service 
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~~ the UK’s 
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We thought 

that would 

put a smile 
on your face... 


...and we pay 
the connection 
charges, 
saving you 


£58.75 


Unbeatable? We think so... 

With an ordinary BT ‘phone line, you can now surf the web at speeds 

you never thought possible - for less than £24 per month. 

We did say unbeatable! Here’s how... 
Xtreme Solo costs 


@ NO WAITING, Using PIPEX Solo - your dedicated Broadband ADSL connection - you £23.44 including VAT 
UP TO 10x FASTER. can download at speeds up to 512kbps - that’s up to 10x faster than a Fey none 
@ NO CONNECTION FEE. 56k modem! Grindingly-slow downloads really are a thing of the past. 
@ NO YEARLY CONTRACT. And because it’s your connection, it means that you're on-line 24/7. 
Just imagine - no more Internet call charges. And no more waiting to 
@ NO INTERNET CALL CHARGES. log-on. It really is this easy... 


@ NO DIAL UP. ALWAYS ON. Just because we're reducing costs, doesn’t mean we're compromising speedtouch 
our legendary business-quality service levels, which regularly keeps ALCAT! 
PLUG & PLAY ADSL MODEM 


@ NO PROBLEMS WITH THE PIPEX as one of the UK’s leading ISPs. & MICRO FILTER® 


FASTEST MOST RELIABLE th i : 
Want to know more? Visit our website where you can order on-line 
INTERNET NETWORK IN . fost 
and you could be powering your way across the Internet within days. 


THE WORLD. 
When it comes to connecting you to the world - we've got it licked! 


rE xX — ~ 
GET EASE NOT FURIOUS www.solo.pipex.net 


TO USE ADSL YOU MUST HAVE A BT LINE AND BE CONNECTED TO AN ADSL ENABLED EXCHANGE. *YOU WILL ALSO REQUIRE AN ADSL MODEM AND A MICRO FILTER. THESE CAN BE PURCHASED FROM PIPEX 
OR FROM MOST COMPUTER STORES. FULL DETAILS ARE AVAILABLE ON OUR WEBSITE. DETAILS ARE CORRECT AT TIME OF GOING TO PRESS. EGOE. 
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Illustration: Anders Schroeder [w] www.dformlshiftfunc.net 
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Using Dreamweaver MX 


Dreamweaver MX comes with a new interface and a host of 
improvements to its existing features, but how easy is it to get 
started for the new user wanting to build better Websites? 


reamweaver is now well 
established as being the 
dominant Web authoring 
and management software. 
With the latest MX version we find a host 
of improvements and new features that 
make the software even more flexible, 
enabling better Website design. 

The MX range sees Dreamweaver 
adopting the database and scripting 
features that were found in the 
discontinued UltraDev package, so we'll 
be taking a look at how things have 
evolved from both a design and code 
point of view. 


Even the most experienced 
Dreamweaver user will have to take 
some time to become familiar with the 
new interface. But this is time well spent 
as you discover how the new version 
operates and helps you become more 
efficient in your results and workflow. 

For new users the interface might 
initially be a little daunting, but these 
next few pages will help you to recognise 
the main components, what they do and 
know how to configure the software. This 
will enable you to create better and more 
effective Websites faster and more 
efficiently than previously possible. 


Part 1: Preparing to dream 


Choosing your environment and recognising new features... 


When you first launch Dreamweaver MX you 

are offered a choice of interface preferences. 
The Dreamweaver Mx interface is recommended, 
but for users who prefer the old style interface this 
can be determined here, while coders can opt for 
that influenced by HomeSite. The following tutorial 
is based around the new Mx interface. 


Before diving straight into the software, take a 
few minutes to read through the Welcome 
page. This has been organised to provide 
information depending on whether you are 
predominantly design or code-based as well as 
outlining how the software will help developers 
through features previously found in U/traDev. 


Existing Dreamweaver users might want to 
take a look through the New Features also 
available from the Welcome screen. If you want to 
look through this after you're a little more familiar 
with the software, you can access this along with 
tutorials and help files through the Help menu. 


Part 2: The interface 


Getting familiar with the new interface for new and experienced users... 


Easier file access 


The docked palettes still take a 
considerable amount of screen 
real estate, but they can be 
moved to be either free-floating 
or docked to the left of the 
workspace. If your screen 
resolution allows it, itmight be 
recommended that you keep 
your files docked by themselves 
to the left, giving them more 
room for access while remaining 
constantly available. 


More palettes 
The default palette layout 


provides access to the most 
common features that you may 
need. However, there are many 
more palettes available through 
the Window menu. Take a minute 
to look through the options 
available here. The Windows> 
Others options enable access to 
the frames, layers and history 
panels for example. 


Although the new interface is quite different 
from the previous version, this is a natural 
evolution. The old floating palettes are now docked 
to the right of the interface, the Properties Inspector 

is now fastened to the bottom, and the Object 
palette now appears as a sequence of tabs forming 
a toolbar at the head of the screen. 


DON DISae Hajeo aan 


4 | The Insert palette provides a range of tabbed 
options along the top of the interface for more 
common elements that you will embed into your 
page. This new approach enables for more features 
such as template and character options to be more 
easily available along with the newly introduced 
scripting and application tools. 


> Design 
> Code 
> Application 


+ Files 


ome 


Clicking on the arrow next to the headings will 

either expand or contract the panel's content, 
reducing the amount of screen space needed for less 
common elements while still providing easy access. 
The options icon that appears to the right of open 
panels allows access to contextual options. 


8 | Below this is a range of tools to further 
improve your working methods. Choose to 
work in either design or code view, or both plus Live 
Data View, enabling database content to be 
generated on-the-fly. File management, preview 
and debugging options are also available here with 
the regular title and view options. 


The Properties Inspector, now fastened to the 

bottom of the interface, dynamically changes 
to offer contextual options dependent on the type 
of object selected in the main window. Use the 
arrowhead to the bottom-right to expand this for 
more options. 


The main editable window is easily 

recognisable from the previous version. 
HomeSite users will also recognise the tabbed 
approach with multiple open pages at the bottom 
of expanded windows. Clicking on any of these 
tabs instantly brings that page to the foreground 
for editing. > 
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Part 3: Defining your site 


Before you do anything, you need to let Dreamweaver know how your site is configured... 


Why bother? 


Dreamweaver is not just a 
WYSIWYG HTML editor offering 
powerful site management 
features. By defining your site 
you are making Dreamweaver 
aware of the relationships 
between every single file in your 
site. Once this has been 
completed you can confidently 
rename, move and delete files 
safe in the knowledge that the 
software will update reliant links 
orreferences and warn you of 
any potential problems that your 
decision might create. 


‘What is the hostname or FTP adders of you Web server? 
fp paragoniax com, 

‘What folder on the server do you wart to store your fles in? 
pubc_pimi/ 


What it pour FTP Logn: 
paragon 


‘What it your FTP Password 


Although experienced users will be familiar 
with this procedure setting up a new site is 
often bewildering for new users. To simplify the 
process Macromedia has introduced a simple 
Wizard approach as an option to defining your site. 


SourceSte Databsce 


Version 1.02 
Desciption Provider access to any SourceSafe 
dalabaze readable by MicroroR Vieust 
SourceSafe Chent verson & 


With Dreamweaver's new found UltraDev 
features, even more experienced users will be 


grateful of such an approach when configuring their 


first SourceSafe database or WebDAV-hosted site. 


Server Modet 'ASP JavaScaipt 
Ther ste contans. lepine 
Access: [FIP x 
FTP Hoot tp pataganian com 
Hoot Dinectory:.ublic_hirl 


Login paragon 


Bmwort [seseoves 


[luce Passive gre 
Ddine Firewall (rn Preferences) 
URL Preto p/p pavagerwne com’ putiic him? 


‘The URL Pref isthe location ofthe sites 
(908 folder on the testing server 


Dine 21 enerymed setae logis 


Features found in the advanced site definition 
options include a testing server for working 
with dynamic database content, and cloaking 
which hides selected files and folders from 
Dreamweaver's synchronisation. 


Part 4: Speed up your design work 


Don't know your ASP from your elbow? Then you'll be more interested in these additions 


Speed upgrade 


When you install even a full 
version of Dreamweaver MX on 
your computer, keep the old 
version installed. The new 
version writes to a separate 
directory and intelligently 
configures itself around a 
previous version. This means that 
you don't need to configure all 
your sites when you first run the 
application. Once installed you 
can safely remove the previous 
version and continue to work in 
MX with minimal disruption. 
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The new Mx interface can be customised to 

suit your work preferences. If your resolution 
enables it, dock your Files palette to the opposite 
side of the screen and separate the assets from your 
site tabs, making them constantly available and 
freeing up screen estate for other palettes. 


| 
| ee Arial ACCCCCC teeta justify 
p.td | 2px Arial WCCCOOC text-align : justify 


A, ACLINK, ACVISIT...| 10px verdana #CCCCCC none 
ACTIVE, AHO_ | Ops verdana #FFFFFF none 
foot |topx wesseee 

sub ‘fie eceeeee 


4 | Style sheets now have improved access 
through the Edit Styles radio button in the CSS 
palette. You can see at a glance the properties of a 
particular element and further editing or duplication 
is now a much more logical process. This will, again, 
lead to much quicker results when including 
cascading style sheets in your site. 


Viewer veri 
Tet: tate A 

Tech Artie 

Text: Arte 

Jeet Artete D 

‘Texts Artie D ath Naw 
Text: aural Entry 
Us Cumenerits Form 
Pe Unload 
Uitege 

LO: Regaster 

(a Search 

Ut Search Rests 

Ue Sere Ent Devenir: 
A) Save Eat 8 

ai Sarwey, Maple Om 


New users will appreciate the variety of 
templates available when creating anything 
from a basic HTML document to a complete 
shopping cart. Experienced users will also find items 
to kickstart the design process when having to 
determine new page layouts or style sheet settings. 


Baar nage coeh 


Aa ong cn the eth, neh Wels on the ee 
BD tecente 


Ale of text at te lop, wath tno mages arct as 
An mage cesnered atene 8 set of brks. 
A CerdtrES mange with Ino Whe on each sete 


— bs 

The new Snippets feature provides some 
production aspects to be available to even the 

most HTML-shy designer. A variety of common 

elements can be easily dropped into place from 

layout and navigation through to form elements 

and common JavaScript functions. 


Established Dreamweaver users are able to tab 

over to the Templates option when creating a 
new file for instant access to all their site's 
pre-defined template files. As MX copies over site 
details from previous installs you should have access 
to all your template files from one point. 


C] 

covenng Fae Septeoated MYPAL 4.49 

be applied tothe BODY einmert Suppor for al these attrbutes, however, vi 
ft FOr Yeats to come 


Attnough & may snpest thom 2 variety of empostions thatthe BOCY element is the document 
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6 | And if that's made you realise just how easy 
coding is, then you might want to take a 
look under the reference tab. The previous version 
of Dreamweaver included HTML, CSS and 
JavaScript guides, but MX adds more titles to your 
library with CFML, ASP, JSP, SiteSpring and 
Accessibility documentation. 


Part 5: The new Dreamweaver 


With incorporating Dreamweaver UltraDev, a much more flexible coding and scripting tool is born... 


Ooh, pointy 
brackets... 


UltraDev was Dreamweaver's 
more hardcore twin offering 
tools and options for the more 
technical author. Dreamweaver 
MX sees the merger of not just 
these applications, but also the 
HTML editing software 
HomeSite from Allaire. 
Macromedia merged with Allaire 
earlier this year, making 
Dreamweaver much more 
powerful and flexible than the 


previous version. 


Please choose the workspace layout you're most comfortable with. You can swatch 
layouts later in Preferences. 


ddosd0000 
dadeo00d0 


© Dreamweaver MX Workspace 


Bomesite Coder Stile 


oO Dreamweaver MX now supports ASP, JSP, 
CFM, ASP .NET, PHP and XML. With the 


recent merger with Allaire, many of HomeSite's 
features have been included to improve code 
editing. If you prefer, you can even opt for an 
interface similar to that of HomeSite via the 
Edit>Preferences>General options. 


4 | The new interface design enables more room 
for more dedicated developer's tools to be 
easily accessible in the new Insert bar. The previous 
Object palette that this one replaces was far 
restrictive in comparison. With such easier access, 
you'll soon find yourself experimenting with more 
advanced features. 


<p> The quartet are heavily involve 


and have given various workshops 


musicians and artists, inciudin: 
Dance Company, and composer Micha: 


One of these HomeSite features is the 

intelligent Code Hints which provides 
contextual code options as you type. This speeds up 
the hand-coding process considerably as you 


plough through your pages. 


Most of Dreamweaver's features can now be 
instantly accessed through the seemingly 
infinite combination of palette combinations. These 

can be determined to suit your preferences but, 
should you need more advanced features, you can 
still dig into the Insert menu's more dedicated 
options for specific functions if necessary. 


3 | For quicker and more immediate access to 
your page's code, the new Tag Inspector 
provides a breakdown of key elements of your 
HTML with immediate access to existing and 


unused but relevant attributes. You can now simply 


find the suitable reference point and make 


immediate changes. 


GF Properties 
GF atist 
| egos) 
g We 


E- Methods 
javatang String toString() 
boolean equals(javalang Object) 
javalang String getTitle() 
javalang String getYeart) 
int hashCode(} 
javalang Class getClass() 
java.lang.String getArtist() 


More advanced technical programming 

options are available through the Application 
palette with access to Database, Bindings, Server 
Behaviors and Components. Many of these 
introduce previous U/traDev features making 
Dreamweaver an even more powerful single 


solution application. 


a 


Part 5: Jumping in the deep end 


So how easy is Dreamweaver for new users? 


Mx integration 


The new MX range has been 
designed so the software 
compliments each other. 
Fireworks can be fired up at the 
click of a button when an image 
is selected, while Shockwave 
files can be further edited in 
Flash as Macromedia continues 
in it quest forthe single solution 
Web design application. 


Considering the huge potential of what was 

once a simple WYSIWYG HTML editor you 
may think that mastering Dreamweaver is an 
impossible task but even the most code-shy pixel- 
pusher should be able to understand the basic 
principles that the software is built around. 


Using Dreamweaver 
Extending Dreamweaver 
Using ColdFusion 
Reference 


Dreamweaver Exchange 


Manage Extensions. 
Creating and Submitting Extensions 


84 </head> 


85 Dreanwaaver Support Center 
86 <body back macromedia Online Forums 
/graphd 
| Online Registration 
Print Regstration 


There is a wealth of information to be found 
under the Help menu for not just the software 
itself but also the technologies, languages and 


principles it relies on. 


rena TE Mar coma 


Macromedia Decamwoaver MX 
Top New Extensions for Dreamweaver MX 
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3] if that isn't enough, new users should be 


aware of the Dreamweaver Exchange site that 


is also accessible through the Help menu. This 
provides a wealth of downloadable extensions 
that will make creating the ultimate Website 


much easier and quicker. EEE 
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Designing 
sites that sell 


There is an element of Web design that is 
shockingly under-represented in current 
writing on the subject: the question of 
making money... 


Hi igures on the stock market and 
i in small business indicate that 
q making money is the single 
i most significant issue facing 
ourtrade since it was invented some 
ten years ago. 

Perhaps it is because design 
sensibilities and business heads make 
for clumsy bed partners; or perhaps the 
issue is simply too tough for journalists 
to tackle. But the message is clear: 
if we continue blithely to produce 
inspired Web bohemia and aesthetic 
interactive masterpieces with not a 
thought for where the the revenue is 
coming from, we won't survive. 

Here, money is more important than 
flashy widgets and sublime design; it’s 
more important than whether or not you 
know how to use Dreamweaver, Flash 
and Photoshop; it’s more important even 
than whether you can actually design. 
Put simply, if your Websites can't make 
money (or save it), then your business or 
department is going, going, gone ina 
market that takes no prisoners. 

This is a tough call, and no apologies 
if you’re wincing at the ring of such 
philistine talk: it’s horrible and it hurts, 


but this is a reality check and you're 
going to have to accept it. Many have 
felt the fall-out from last year’s Internet 
stock tumble — it wasn't the first and it 
won't be the last. But there are things 
you can do to make sure you're not part 
of it. 


Biting the bullet 


If you can prove to clients that your 
Websites make money, then you're 
probably going to get the job, because 
not many Web designers can do that. 
Most have a track record of big ideas 
with small paybacks, at best; at worst, 
a litter of bust companies in their 
wake. So here's what you need to know. 
There are three faces to profit on 
the Web: one is bringing in cash 
directly, as in the case of e-commerce; 
another is saving it — online customer 
service, for example; and the third is in 
improving the performance of other 
areas of business, usually through 
information and communication. You 
should promote an even mix of all 
three, although bosses will invariably 
want to talk more about the direct cash 
option, because it’s easiest to > 
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Amazon.com — not much in the way of beauty, 
but the community features built around this 
site are legendary. Here, you can add your 
own recommended reading list, which may 
be featured on the homepage, and share it 
with other bookheads. You love doing it, 
people love reading it, and Amazon.com loves 
not having to pay for it. 


quantify — and ironically, it’s also the 
hardest to achieve. 

Nevertheless, if you’re prepared to 
put some thought and research into the 
ways you can use design to present, sell 
and market products online, there is no 
reason why can't achieve considerable 
success in this. 

Your starting point for designing 
an online store is this question: what, 
in the real world, makes me want to 
buy this product from this shop or 
company? If you’re designing a site to 
sell sardines and you've never thought 
about sardines, it’s time to start. Eat, 
live, breathe sardines. Be a fanatic. 

It boils down to this: you need to be 
an expert at deciphering what, in terms 
of design, influences how and where 
people spend money. 


Having a laugh 


Research into the psychology of 
spending, much echoed in Webby 
circles, suggests that primarily people 
want shopping to be an enjoyable 
experience. This is the most ridiculous 
understatement of our era. For 
goodness sake: shopping is one of 


If you're designing a site to sell 
sardines, then eat, live and 
breathe sardines. Be a fanatic 


The customer perspective 


the premiere forms of entertainment. 
I've got a paycheck, let me spend it! 

If you really need evidence, consider 
the term ‘retail therapy’, now sealed for 
eternity into the repertory of chick-lit 
lingo; or the bulging stuff-you-can-buy 
sections of myriad lad, tech and 
‘special interest’ mags, now consuming 
more white space than any other. 

Asa parallel, information gathered 
from affiliate programs tells us that 
when people click ona link on one site 
to buy a book or an MP3, ora pair of 
socks on another site, they hardly 
ever buy that particular item. They 
browse, they sniff around a bit, they 
um and they ahh, phone their partner, 
mate or mum, and finally — if it’s a 
Tuesday or the sun is shining — they 
settle on an item or two, then begin to 
consider the great credit card question: 
Is this safe? 

We'll get to that in a minute. But first, 
consider these behavioural patterns, 
and how you can use design to exploit 
them. We go shopping in the real 
world for fun and, likewise, we can go 
shopping online for fun. We want to 
spend money in places that we like: 
we think they're cool, we think they're 
beautiful, or we like what they've got to 
say. Your site needs to speak to your 
customer, and it needs to do it directly. 
This is surprisingly undervalued by 
Web bosses with tight purse strings, 
yet a well-established fact on the high 


Jo King uses the Internet regularly to buy flights, holidays, and other products. She 
particularly likes [w] www.bol.com and [w] www.go-fly.com (pictured)... 


Why do you like buying at these sites? 


Bit of a hoo-haa: Liquid.com’s best-sellers 
page. Mistakes like this are so simple, yet 
they'll cost you a lot of business. 


street. If anything, it is more important 
online, and here's why. 

Body language makes up 80 per 
cent of communication in the real world 
(that much-cited, unprovable, yet 
remarkably appealing ‘fact’). On the Web, 
design is your body language. It’s like the 
outfit the shop attendant wears ina 
downright funky skate shop; orthe smile 
on the face of your favourite grocer. 
Without these, you are less inclined to 
spend your hard-earned capital. 

It’s effective to use design wherever 
you can to emulate online the shopping 
environments we know and love in the 
real world. Familiar colours, motifs and 
stylistic elements all work together to 
tell people they are in the right place, 
and they’re going to get exactly what 
they want here. It’s all about trust 
and comfort, which are necessary 
preconditions for fun. 

Likewise, use features such as 
animation, video and articles where 
they would be effective in the real 
world — but don't be tempted 
otherwise. It’s just another distraction 
for customers, and as a designer, your 
job is to meet a business objective, not 
to show off. 


' t 4 7 - REE, They show you exactly what you are doing at each stage. You know 
mtr pte term Sth Povwtes ne 
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how many screens you've got to go, you know when you're actually 


Click click 


Retail therapy is not just about hanging 
out in cool places and spending money. 
It is also, as we saw, about looking 
around, seeing what's on offer and 
weighing up the pros and cons over a 
cuppa. The much cited Amazon.com, 
and justly so, is the greatest example of 
a site that understands this. Wherever 
you look, you have excerpts, reviews, 
comments from the author, comments 
from readers, links to related products, 
links to products recommended by 
people that liked this product, and so 
it goes on. There is, quite literally, an 
evening’s reading on a single Web page 
— but it’s all focused on one thing: 
getting you to buy this product, and 
hopefully one for your mate, too. 

Of course, you're not meant to read it 
all. You're just meant to be reassured by 


availability & booking 


about to pay for something, and it’s all laid out very clearly. 

What can designers do to improve Internet business? 

The main problem is worrying about your credit card. So you can say, 
‘Look, all these other people are buying here’, so customers feel 
reassured; make the process open, and make it obvious if it's a secure 
site. It's good when you get your confirmation email straight away, 
‘Goeth eferss "trom beter ck with a customer service number. 


‘Tor iw dowwastic fghs, passengers over the age sore than 9 people. Or call 08702 
‘oF LL fust oresent phate 1D. ok on news for ata at 


Spore Worst stumbling point? 


At Amazon.com once | ordered something and pressed submit. Then 
nothing happened, so | pressed it again, and ending up buying it 


twice. The site didn't say anything was happening, so | assumed. Then 


White space, no fuss and pages not overloaded with text... Go Fly's site 
is a fast-loading display of online simplicity for budget travellers. 


| had to take the time to phone them and sort it out. 

Most effective initiative? 

Amazon.com sends out these emails with a £5 off voucher or 
something, so you go to the site and take a look. Not especially 
original, but it does work. 
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the volume of it. You're here to sniff and 
browse, and the Amazon.com format 
opens the door for you to do this. Grab 
a sentence here, a picture there, then 
click a link and look at something else. 
Throw enough soup against a wall and 
some of it will stick. 


Focus 


You do have to be careful if you adopt 
the loaded-with-links approach. What 
you don't want is customers getting 
distracted from the purpose of their 
visit: to spend money. Every link, every 
comment, should subtly point to 
payment pages. Remember, 100 full 
shopping carts are no good if they 
don't make it through the checkout. 

It is common for clients requesting 
commerce sites to demand that they 
be filled with fantastic content: articles, 
games, chatrooms, resources and 
a dozen other types of expensive 
customer freebies. They think it will 
make people come to the site and hang 
around more. Well perhaps it will, but 
it won't help them sell more products, 
because if the top ten things ona 
homepage are for free, damn near ten 
out of ten customers are going to 
change their minds about retail therapy 
and go freetail instead. 

In fact, the free resource outlook is 
doubly a red herring, because not only 
does it fail in its objectives, itis also rare 
for companies without expertise 
in the field to produce consistently 
worthwhile and regular content, games 
and suchlike. The result is a dumbing 
down of what they can actually do 
effectively. Focus on what you're good at. 

This is not to say that there are 
no contexts in which freebies can 
work. Building community-oriented 
resources around certain types of 
products — software, for example — 
is extremely valuable; while having a 
simple, cool game on your site can 
attract a lot of visitors through outside 
links, who may otherwise never hear of 
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MyFonts.com knows how to make shopping 
fun. You can spend hours browsing around 
and weighing up the options. Once you're 
ready to go, you can be paid up and out within 
minutes - it’s perfect. 


The in-house perspective 


John Phipps is Head of Web Development for John Lewis’ online store, bridging in-house 
design, technical and business camps... 
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What can designers do to improve Internet business? 


In the main, people need to apply simple retail logic. Lots of 


| Address [ig net:fiwewe sohrtees-comfDetauk. 25570 true 


johnlewis.com rewenenf 


Welcome te johnlewis.com Home Page 
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Arefreshing online extension of the John Lewis brand, this site is 
detailed but never complicated - it’s clean, simple and user-friendly. 


you. Direct one in ten off to your online 
store, and you could be talking money. 

But to make this work, you need to 
be clear. Say it up front, and say it with 
confidence: “This is a shop, and we 
want you to spend money.” No point 
trying to pretend otherwise. 


Think practical 


Web designers often believe that 
design is solely about the aesthetic: is 
it beautiful, is it cool? If James Dyson 
had thought like this, he would have 
stuck a rosette on a Hoover, sold it as 
a Dyson, and today be seen peddling 
such tosh from the Shoreditch market. 

Users want performance, they want 
practicality and they want innovation, 
as well as aesthetics. And these all 
fall under the remit of design — not 
programming. In Web design, they 
translate into speed, structure, ease- 
of-use, responsive content and a 
general desire to bookmark this 
fantastic Website. 

If you’ve never drawn out the 
structure of a site in a diagram, today is 
the day. Draw a circle, label it Home, 
draw some more circles with names of 
your site sections, forms, purchase 
pages and more, then start connecting 
things up with lines. Soon you'll have 
amass of black ink, squeaks and 
twiggles. Your job now is to make sense 
of all this to the user. They should never 
know how messy your plan is, because 
wherever they are on your Website, the 
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customers know how to shop — designers need to take years of 
shopping experience and translate it direct to the Web. Not try to 
reinvent the wheel. Keep it clean, keep it simple, with lots of white 
space so you don't overload customers with ideas. 

Worst stumbling point? 

Designers want to flow in lots of flashy, whizzy, but ultimately dull 
things. People simply don't want to see them. You don't go into a shop 
and get a barrage of videos — why would you want to see them on 


your PC screen? What the designer likes is irrelevant, it's what the 


customer likes. Always design around how the customer likes to shop. 


Most effective initiative? 


Usability. Without a shadow of a doubt. We undertake a lot of 


customer testing with an external company. We watch every step they 


take, record every movement. If they want the button to be there, we 


put it there. It doesn't matter how many products you've got, how good 


your prices are, if ultimately the usability is awful. 


button for the page they want is right 
there. To your customer, it must always 
be clear. 


How to double your income 


On the average site, finding and buying 
a particular product takes eight to ten 
page clicks from home to receipt. This 
is a lot, especially when you consider 
that the drop-off rate is about 50 per 
cent for each page in the process. Get 
customers through the system one click 
quicker, and you’ll have double the 
business. Or to put it another way, at the 
end of a ten-click run, you have less 
than one remaining die-hard out of an 
initial 1000 curious buyers. 

That's a big statement, with a big 
number behind it. If you can change 
things, you’re going to have big 
numbers on your end-of-year report, 
and that paves the way for you to do 
more exciting, more innovative and 
more satisfying things in your design. 

How do you go about getting users 
from A to B quickly, when you're never 
quite sure where B is fora particular 
customer? That's a tricky one, and the 
formula is going to depend on the > 
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Expedia.co.uk — all the deals right there on 
the homepage. The travel sites have made an 
art of navigating users through reams of 
useless information in order to find the single 
flight that matches their price, timing and A- 
to-B needs. Here, the advanced search rules. 


Get customers through the system 
one click quicker, and you'll have 
double the business... 
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The client’s perspective 


Louise Henshaw is Internet Project Manager for Oxfam and the Fair Trade online store, 
[w] www.fairtradeonline.com, co-ordinating projects, agency pitches and outsourcing... 


What can designers do to improve Internet business? 


The design has to relate to what you're trying to convey, it’s got to 
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reflect the objectives of the Website, and this is difficult to achieve. 


It’s like you either have a design look ora very information-based 


look, and it’s hard to get the balance. But that’s what you need. 


Worst stumbling point? 


When the design isn't telling you what to do. It’s too abstract. You don't 


want design for design's sake, because it’s not achieving anything. 


That's the biggest mistake, along with making it too complex. There's 


a fine line between this and having lots of options — where there's so 


much you want to do, it makes it really exciting. 
Most effective initiative? 


‘ The Big Noise initiative at [w] www.maketradefair.org. It's fun, it’s 


interactive, it’s a different way of presenting our message. You can 


see who else has joined up, and it's very direct and visual. We had a 


Social and economic initiative, Fair Trade Online, has managed to 


outline its objectives in a way that's direct, simple and usable. 
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style and content of your Website. But 
it’s the kick-me-simple solutions that 
really work when it comes to solving 
problems like this. It’s a no-brainer, for 
example, to add a ‘Top Ten Products’ 
list to your homepage — yet few sites 
actually get round to doing it. If a 


Five ways to make money online 


lot of good feedback on that — and it’s very design based, ironically. 


quarter of your customers want to buy 
one of these ten products, and you can 
get them there in one click, not four or 
five... well, you can do the maths. Plus 
you're going to get a whole load of new 
buyers for yourtop ten, because they 
want to know why everyone else likes 


them so much. Smells like business, 
but really it’s design. Logical design. 
Commercially aware design. 


Treat me like a person! 


Another neat trick is to remember your 
user. We don't just mean their names — 
they know what their names are, thank 
you very much — but also which 
products they sniffed around last time 
they were visiting your Website. You 
can offer quick links to these on the 
home page, and remember what they 
put in their baskets previously if they 
complete the transaction. It’s friendly, 
it’s comforting, and it’s a half-decent 
substitute for a real-world salesman. 
But the real reason it’s going to work is 
that you already know they’re half-sold 
on buying this stuff; there's a good 
chance that the only reason they didn't 
was a little doubt about credit card 
safety, or how the bank balance was 
that week, or whatever Auntie Mabel 
would think. Buyers like to be 
indecisive, and it’s their snap decisions 
that translate into success for you. 

The steps you can take as a designer 
to improve the cash balance on your 
Websites are numerous, effective, and 
in most cases, pretty simple to achieve. 
They also have the power to make 
you a unique kind of Web designer — 

a profitable one. The more bucks 
you can get in, the more out-there 
you can be. EE 


Direct e-commerce is not the only means to reap hard cash from your Websites. The more options you take up, the more likely 
you are to succeed — and many of them aren't that hard to set up... 


1. Advertising and sponsorship 

Until recently, on a Web where everything has 
been free, advertising has been the big home 
for commercial profit. It has, unsurprisingly, 
been an unmitigated failure, with just a few 
online giants sucking up some 50 per cent of 
all online ad spend. But the market is picking 
up, and if your site can pick up a loyal and 
valuable niche following, there is an 
opportunity. In particular, email newsletter 
sponsorship is getting good results. 

Who can help you? 

[w] www.doubleclick.com 

[w] http://adnetwork.bcentral.com 

Or, you can go it alone. 


2. Affiliates programs & pay-per-click 
Following poor response from online 


advertising, a new pay-per-click or pay-per- 


purchase model has emerged. Here, you 
can promote other people's products in 
(reasonably) any manner you wish, where 
you get paid a commission fee for whatever 
business you send their way. If, for example, 
you have a site about football, then why not 
find a football kit retailer with an affiliates 
program, sign up, and then link up a ‘Top Ten 
List of Things To Buy’ on your homepage? 
Who can help you? 

[w] www.commissionjunction.com 


[w] www.linkshare.com 


3. Selling your own product 

Setting up your own online store is a little 
harder: you need technology, content, 
security, cash collection, delivery and 
marketing mechanisms. But the rewards, if 


you get it right, can be great. Increasingly 


there are online services and off-the-shelf 
products to help you get started without all 
the bother and expense, some of which are 
remarkably easy to use — it’s well worth 
taking advantage of these. 

Who can help you? 

[w] www.store.yahoo.com 


[w] www.bcentral.com 


4. Website subscriptions 

A special type of product you can sellis 

a subscription to your Website, or an online 
service (virus scanning, for example). 
Websites that have been offering free content 


and resources are now increasingly moving 


towards a paid-for model, or building in VIP 


areas which you must pay to use. With a little 
a password protection this is surprisingly easy 
to get going, but to make it work ona business 


level, you need to offer something extra for 
the cash. 

Who can help you? 

[w] www.payal.com 


[w] www.dotencrypt.com 


5. Syndicating content 

A fifth, and slowly emerging means to make 
money from your Website is selling content 
to other sites. Many e-companies find it 
difficult and expensive to originate regular, 
high-quality content for their customers, so 
they look to the experts. If your site has the 
right content for the right market, this could 
mean the bucks for you — but do take care 
not to sign away your rights. 

Who can help you? 

[w] www.yellowbrix.com, 


[w] www.moreover.com 
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Illustration: Richard May [w] www.richardmay.com 


Lip-synching in Flash MX 


Add extra personality to your Websites with fully lip-synched animated characters. Sprite 
Interactive explains how to make the mouths move with the words using Flash MX... 
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ip-synching is the art of matching recorded 
dialog to a character's lip movements. The 
process involves figuring out the timings of 
the speech and then animating the mouth to 
create the various mouth positions for the character. 
Lip-synching your online animations can give them 
extra personality and realism — a little touch your 
site's visitors will appreciate. 

You need an understanding of the basics. Let's 
begin by breaking down speech into a set of mouth 
movements. This will give you a greater understanding 
of how speech is formed, and you will also be able to 
match specific movements with specific sounds and 
accurately sync your dialog. Speech can be broken 
down into eight basic mouth shapes, outlined below. 


Basic shapes 


@ The first shape is a neutral expression. 
@ The mouth is held open wide in a big smile to form 
the A and | expression. 


@ To form the C, D, E, G, K, N, R, S, Texpressions, the 
teeth are held together with an open mouth. 
@ The lower lip is held against the upper teeth and the 
centre of the upper lip curves up to form F and V. 
@ With the mouth held partly open and the tongue 
between the teeth, L and Th expressions are formed. 
@ The lips are held together when forming M, B or P 
@ When forming the O, Y, W expression, the lips are in 
a puckered position. 
@ To form the Z expression, the mouth is in a smiling 
position while the teeth are held against each other. 
These movements relate to components of speech 
called phonemes, which are strung together to make 
words. You should look for overlapping sounds and 
shapes in your dialogue that might represent a number 
of phonemes, as this can save hours of work. For 
example, you may need to use the F phoneme for TH, 
so you should look to apply this wherever you can. You 
can divide the phonemes even further than outlined 
above, which will lead to increased levels of realism. 


DC,0,E,G,KNRS,T | 


The eight basic mouth positions that speech can be broken 
down into, you will use these for planning all your lip-synching. 


We have provided you with a Flash file in the Tutorial\ 
Lipsync folder on the cover CD, expression fla, which 
contains the following preset mouth shapes: 


M, B, P — the lips smack together and press firmly 
closed. They intersect a little to highlight the 
difference between this phoneme and the neutral 
pose. It is worth breaking from the symmetry by 
rotating the lower lip up, and the bottom lip down and 
in. Sample words: Mum, Bong, ta? 


C, K, G — the mouth is not opened as far as for the 
vowel phonemes. The jaw rotates down, and the teeth 
are separated about the height of a tooth. The teeth 
should represent around 30 per cent of the mouth, with 
the tongue and inside of the mouth representing the 
other 70 per cent. Sample words: Curry, tooK. 


CH, SH, J — the lips are puckered outwards which 
narrows the mouth a bit. The teeth are together. 
Sample words: CHutney, SHeet, Joke. 


FV —the lower lip is curled up and underneath the 
upper teeth, so that it’s pressed between the upper and 
lower teeth. The upper lip should be brought up so the 
upper teeth are exposed. Sample words: Fire, MoVe. 


A — place the corner of the lips above the vertical 
centre point of the open mouth. Sample words: 
Answer, blAde, Ape. 


1, U — open the jaw slightly more than in the A pose, but 
less than an O pose. The corner of the lips should be 
placed at or below the vertical mid-point of the open 
mouth. Sample words: In, Unsure, pOnder, sick. 


O — this is the most extreme open mouth position. The 
corners of the lips are positioned at the mid-point of 
the vertically opened mouth, and the mouth is 
narrowed/puckered naturally since it needs to narrow 
as it opens. Sample words: Owl, OAr, Over. 


E — this is the smallest opened mouth position. The 
mouth opens about the same as a C, K, G, but is 
widened out. Sample words: swEEt, EAt, feet 


TH — the tongue protrudes out and is pressed between 
the upper and lower teeth. These phonemes are the 


most used poses that benefit from drawing the tongue 
movement. Sample words: teeTH, forTH, THat. 


N, D, T, L — for poses where the tongue touches the 
teeth, rotate the tongue up and behind the front teeth. 
Sample words: Name, Dog, ouT, baLL. 


S, Z— with the teeth together the lips expand up and 
down and widen so the teeth are visible. Sample 
words: Snow, Zoo, Sneer. 


R — youcan probably get away with a regular C, K, G 
pose, but we tend to open the upper lip into a sort of 
sneer. Sample words: Roll, dooR, wondER. 


W, 00, Q — the mouth contracts/narrows into a small 
opening with the lips puckered outwards. Sample 
words: WOOd, drEW, QUlet, fOOd. 


Go to the effort of adding a tongue and teeth to your 
character, as these add a whole extra Level of realism. 
Since the mouth of your character will be open when 
they are speaking it is generally a good idea to have 
detail in there, including teeth, gums, a tongue and 
some inside mouth cavity. You may not think you need 
gums, but for poses like the sneer you will see them. 
There is one other area that you need to be aware of 
when Lip-synching a character: emotion or expression. 
Unless you want your character’s face to remain 
perfectly flat, you'll need to make it look happy, sad or 
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any other expression that can be created using only 
basic face movements. Typically there are six base 
emotions: sorrow, anger, joy, fear, disgust, and surprise. 
You will need to create phonemes for your character, 
ina flat style as well as with each of the basic 
expressions pictured at the bottom of this page. So you 
can create the phoneme for “oh” as “oh my!” in seven 
different ways. You should think about how your 
character's mouth may change between saying “oh my” 
really loud and if scared, as opposed to a sorrowful, 
slow expression. Eye expressions are also important, 
as any minor changes will be picked up by the viewer. 


Recording dialogue 


When planning dialogue you should begin by 
recording the sound into your computer, and then 
placing the words underneath the audio tracks to 
determine the mouth position to be used and the 
keyframe it is to be assigned to. The next stage is the 
creation of a model of the head to be used to form the 
various expressions that correspond to the basic 
mouth positions we showed you earlier. 

After creating the sound diagram, and with your 
character movements defined in the Library, you can 
now proceed to the Timeline and set up the animation. 
You need to drag the first facial expressions that match 
the first vowel or consonant of the sound diagram. Then 
drag the next expression to the second frame of the 
animation, before continuing to set animation frames 
according to the sound chart you made. 

You must keyframe your character's mouth and 
expressions to match the right phoneme for the sound 
at that frame. You will need to space out some 
animation frames more than others due to the fact 
that some sounds are more drawn out. Youcan doa 
quick and rough preview by testing the movie. By 
previewing it more and checking the mouth 
movements against the motion you can fine-tune your 
animation until it is perfect. 

The method you plan to use for animating will 
directly influence how you want to approach this; the 
best way is to use different poses of phonemes and 
expressions. If required you can sometimes tween 
between the start and end of each word. By illustrating 
the effect expressions have on the face, any phoneme 
or expression can be made from only a few 
illustrations. The following list shows each of these 
illustrations and how they are used: 


Sorrow Anger = Joy 


Fear Disgust Surprise 
An illustration of the basic human emotions. These are 
important to give your character a feeling of life. 


These expressions can be used after phonemes and in-between 
sentences to make your character appear more lifelike. 


30 | Web Design 


An example of a sound file broken down into its component phonemes using Flash. Each keyframe is a phoneme. 


Grin L & Grin R — a basic half smile, where the mouth 
remains closed, allowing it to blend with an open 
vowel phoneme, such as an A, to get an opened mouth 
smile. For long lasting smile shots you may want to 
make an open mouth smile as well as the blend is not 
always perfect. Flatten the bottom of the eyes as well. 


Sneer L & Sneer R — this targets one muscle and, 
usually, it’s good to try to get a crease line from the 
nose to the side of the mouth, while also exposing the 
upper gums. These poses can also be used to expose 
the upper teeth more when talking, as well as for anger, 
disgust, and similar expressions. 


Frown — there are two separate muscles pulling the 
corners of the lips down, you should also make the 
lower lip pout outwards. 


Eyebrow Up L & Eyebrow Up R — all you need for 
cartoon characters is the simple up and down. Fora 
more realistic effect you do not need to move the outer 
area of the eyebrows much, but move the centre. 


Eyebrow Down L & Eyebrow Down R — the eyebrow 
moves down and in and the centre of the eyebrow area 
starts to wrinkle. 


Squint — in this pose the eyelids close to meet at the 
exact middle, and the area beneath the eye bulges. 


Blink L & Blink R — here, each eye closes individually 
so you can offset blinks. By having this separate from 
the squint you can use the squint for an overall eye 
shape and then easily go back and animate the blinks 
later. It may help to have the lids meet at an area three 
quarters of the way down from the top. 


When illustrating expressions it is important to build 
the left and right sides of the face as separate 


Magpie Pro 


components to give you more control and make the 
character more lifelike. 


Track analysis 


Track analysis is the art of listening to pre-recorded 
dialogue or sound and planning the timing. 
Traditionally, the audio would be played ona device 
with a counter. The animator would play it over and 
over and write down the estimate of when each 
phoneme occurred. 

For cartoons this information was (and is) recorded 
on what is called an exposure sheet, or X-sheet for 
short. An X-sheet is really nothing more thana 
glorified table. Flash is a great tool for building 
X-sheets, as it already has frames for you to work 
around and has space to make notes. 

The best way for Flash to perform track analysis is to 
import the audio file into Flash so that you can see the 
waveform, then you will need to play the audio back 
and figure out the timing. There is software available 
for building X-sheets, and you can also use the 
Ventriloquist plug-in for either the Poser or Magpie 
package to do the same. There are even automatic 
voice recognition packages that analyse your audio 
file and will work out the timing and phonemes for 
you. Ventriloquist by Lips Inc and similar packages 
take the audio file and text of the file and generate a 
digital X-sheet. 

There are many ways to do lip-synching, and the 
way we have outlined above comes from many years of 
experience. You can do the lip-sync by hand, or by 
using one of the automated systems that we have 
talked about. In the end, though, it comes down to the 
individual's personal preference and this, in turn, 
comes from exposure to the different techniques. 
Practice and effort is the only way you will achieve 
quality lip~synching, so have a go at the following 
tutorial to get you warmed up... 


Magpie Pro is a powerful lip-sync and animation timing tool forthe professional animator. There is not an exact methodology 


for development, but the process is based on individual experience and the stylisation of the character. 


You can animate a wide range of facial expressions in Magpie. As part of the set-up process you create an “expression 


set” for your character. This expression set defines all the expressions (or Poses) your character's face and lips can adopt at a 


frame of the animation. Expressions are grouped in channels based on what facial feature they belong to, for example, you 


can define a mouth channel and include all the different mouth shapes in it. 


To add more expression to your character you can define a second channel for the eyes, and maybe a third forthe 


eyebrows; you can define as many channels and expressions as you need. Magpie Pro uses the images to present the 


expressions to you in the user interface, and adding an expression to an expression set is as simple as dropping the 


corresponding image file into the expression set area in the Magpie Pro window. Magpie Pro shows the contents of each 


channelas a track in the bar sheet. See [w] www.thirdwishsoftware.com/1 magpiepro.html. 


Part 1: Getting in sync 


To work along with this tutorial, use the file, expressions. fla, 


which can be found in the Tutorial\Lipsync folder on the cover CD... 


Time saver 


When your character is looking 
straight at the viewer you can 
save a lot of time by drawing the 
head, mouth, eyes and eyebrows 
on individual layers. This enables 
you to do subtle changes on the 
overall head movements. 


Expressions 


The animator needs to consider 
expressions that the face will 
make to communicate an 
emotion. The most important part 
of the face to convey emotion is 
the eyes. Working hard on the 
illustration of the eyes make a 

big difference to your character. 


First of all prepare your sound. You need to 

. —_ eS break the sound clip down into separate 

@ Analysing a voice is simply a matter of listening _ sections as this helps to manage the animation We have called the first sentence 1.wav. By 
to the audio and marking the phoneme for the _ efficiently and means that the movie can be broken illustrating the effect expressions have on the 

relevant keyframe. Look at the file, expressions. fla, down into separate scenes. A good guide is to use face any phoneme or expression can be made from 

from the cover CD, which talks you through separate sentences, for example the story used in only a few illustrations. This will form the 

creating basic facial expressions for your character. this example was broken down in the following way. _ introduction of the movie. 


(le OleClelele lele _Clele ele le Cle le __O 


The second sentence, which has been saved as 


The third sentence is a file called 3.wav, which 
2.wav is a grin —a basic half smile. The mouth 


is a sneer. Try to get a crease line from the nose The fourth sentence is a frown called 4.wav. 
remains closed. This describes the grin, for a more to the side of the mouth, expose the upper gums as Two separate muscles pulling at the corner of 
realistic grin you should also flatten the bottom of well. This can also be used for other sneer-like poses, _ the lips. For a more effective frown you can also 
the eyes. such as anger and disgust. make the lower lips pout outwards. 


Lh 


bathe cite tld) a 


The fifth sentence, eyebrow up, is saved as 8 | The sixth sentence is saved as 6.wav — eyebrow - - - 
5.wav. All you need is a simple up and down. down. The eyebrow moves down whilst Sentence seven is called 7.wav and is a squint. 
This is the case for cartoon characters, for a more wrinkling at the centre. This is a straightforward Eyelids need to be closed to meet at the exact 
realistic animation you should move the centre of expression to animate facial movement that can be centre. To make a squint more effective you can 
the brow, but not the outside. applied to either side of the face. make the area beneath the eye bulge a bit. 
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Part 1: Getting in sync continued... 


Libraries 
Build libraries of lip-synched 


words that can then be reused. It 


is also possible to store actions 
not related to the mouth, such 
as an eye blink ora body 
movement. In time you will be 
able to build a library that takes 
into account all possible 
situations for your character. 


Story telling 


Good character illustration will 


capture and involve the audience 


and will bring your character to 
life. The art of story telling is 
about appealing to the eyes as 
well as the mind. A well-drawn 
character can easily fillin the 
bits that an animator misses out. 
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8.wav is the filename of the last sentence, 

Blink. Here each eye closes individually so you 
can offset blinks. You should have the lids meet 
about three quarters of the way down from the top 
of the top of the eye. 


fey To make the process easier, and make the 

waveform easier to see, select the Sound layer, 
select Properties from its context menu, and set the 
Layer Height to 300 per cent. Do the same for the 
Text layer, and set its height to 200 per cent. 


€,D,£,6,K,N,R,S,T MovieClip 
B@ Expresssions Folder 

FY Movie Clip 
B intro Folder 

L, Th Movie Clip 
Movie Clip 
Movie Clip 
Movie Clip 


@& ™,8,P 
BE Master 
Bl o,v,v 
(B sounds Folder 
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Before beginning it is a good idea to organise 

your library to avoid confusion later. Create 
separate folders for the expressions movie clips 
(covered later), the sounds and any character assets 
you are using. 


11 | It is best to keep the original sound recording at 


the highest quality possible as you can export 
the audio at different compression levels for 
different uses in Flash, for example, higher for a CD 
and lower for a Website. 


14 To make the frames wider select the button 
in the top right of the Timeline and select 
Large to make it the standard layout for developing 
the movie. 


Create a keyframe on the first frame of each 

Sound layer and, from the Properties panel, 
select the appropriate WAV file for the scene. Make 
sure to set the sound Sync to Stream in the 
Properties panel, since any other setting will result in 
sound sync problems with the exported movie. You 
will now see the sound waveform along the top of 
the Timeline. 


“. 
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Next up is to create the movie. In Flash, create 
anew movie with three layers. Name the top 

layer Sound, this layer will hold the sound clip. 

Name the middle layer Face, this contains the 

frames of the animation. Name the bottom 

frame Text, this contains the original lip sync text as 

frame comments. 


etl 


Next, open the Scene panel and duplicate the 

m® scene for each section of the story, in this case 
it is eight times. We have named each scene as the 
relevant expression. Then add the sound clips, select 
File>Import, and import the eight story.wav files 
into the movie library. 


18 Create keyframes on the Text layer for each 
word of the dialogue being spoken. Using the 
Properties panel, set the frame label for each 
keyframe to be the word being spoken, add // at 
the start to make the word appear as a comment. 
Arrange the keyframes so they sit at the beginning 
of each word. 


Part 2: Creating the face and lip positions 


Now that we have the basic expressions, we can add the positions of the mouths and lips... 


Breakdown/ 
track analysis 


This is the art of listening to 
pre-recorded dialog and sound, 
and working out the timing. The 
animator analyses the sound by 
listening over and over and 
writing down the best estimate of 
when each phoneme occurs, 
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Folder 
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hy The final stage is to create the faces and lip 
positions for the animation. These are based on 
the eight basic lip positions and are used to build the 
whole animation. 


The transitions are the movements from one 
phoneme to another, you can do this by 
tweening between the mouth shapes, but we have 
done it by jumping from one keyframe to another, 
which gives a feeling of pace to the animation, and 

decreases the development time. 


To make the face animate at the end of each 

scene, like the tutorial file, all you need to do is 
drop the particular expression movie clip you want 
to play into the Timeline after the talking has 
stopped, leaving enough blank frames for the clip to 
fully animate. 


Movie Clip 
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Movie Chip 
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4 Look in the library of the expressions. fla file, 
this provides you with the basic lip positions 
you need for the animation. To begin each scene 

add the asset Master from the library to the stage, 
this displays Zak in a neutral pose, which can then 
be added to. 


a P Li 
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a The new ‘scrubbing’ feature of Flash MX 
enables you to preview the sound when 
moving the playhead along the Timeline, this is 
extremely useful for fine-tuning the lip-synching of 
your animation. 


Finally, you need to preview your movie and 
make notes on where the speech and mouth 
movements do not meet, you can then go back to 
your Flash file and tweak the positions of the 
phonemes so that the speech runs smoothly. 


or STs AARAARAG ARRAY ARAM! 
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[3 | Create a new keyframe to correspond to the 
start of the next word of the dialogue. For 
example, the first paragraph, “By illustrating the 
effect ..." starts with an A, | position for the word 
“By” followed by another for “il” and then an L, TH 
position for the “II”. Continue this process for the 
other words in the scene. Once complete, you need 
to insert the lip positions for the word transitions. 
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The tutorial talks you through the main basic 

facial expressions. We have created each facial 
expression as a separate movie clip, and they can be 
found in the library in the folder, Expressions. 


Now all that is left to do is export your movie 

with the correct sound export settings for the 
type of media that you will be playing it on, which 
are set in the properties panel of the WAV file from 
the library. 
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Lateral 


“I remember the thrill of writing my first «a href»,” says Jon 
Bains, Chairman of fiercely independent Web design studio, Lateral. 
“Now I think the industry's starting to get exciting again...” 


s acompany | know we're evolving, but I’m 
not sure what we're turning into,” muses Jon 
Bains. “It’s a bit like being in a David 
Cronenberg film — we're a cancerous growth 
that might turn into something useful.” Considering the 
downturn that’s cut a swathe through the Web design 
industry, you'd think the fact that Lateral remains intact 
would be progress enough. True to the company’s 
name and ethos, Bains is thinking, well, more laterally. 
“When we started it was all about being a funky, 
technically-driven creative madhouse,” he says. “We 
still do those things but, as much as | hate to say it, | 
think we've become more professional.” 

Partly, this is a knock-on from the company’s 
longevity — five years being a lifetime in Web design 
terms. Whereas Lateral was a young gun, now it’s part 


“People such as Poke, Deconstruct and Fjord are at the 
top of the third division. We're top of the second 
division because the middle companies vanished.” 
This new wind of practicality is reflected in clients’ 
attitudes too. “The second generation clients are more 
realistic about the results they want,” Bains confirms. 
“They've been burnt once already. They need to be 
convinced we're not trying to screw them over.” The 
good news is that the worse excesses of the Flash-for- 
sake-of-Flash mentality have been replaced. One 
example is Lateral clients, such as Mars, Interbrew 
and Levi's, running their own groups to monitor the 
performance of their Net presence. Lateral has a pair 
of eyes to track site traffic and make design changes: 
or, the aftercare department, as Bains wryly calls it. 
But whatever it’s called, as he acknowledges, this 


of the establishment. “We used to say we were the top 
of the third division in terms of size,” Bains explains. 


type of service is an increasingly important area of 
expertise for the company. Instead of creating a > 


1. Two recent campaigns Lateral has run for Levi's are 
Lostarcade and Lostchange. In Lostarcade, users could win 
prizes by playing simple games. Launched four months later, 
Lostchange was a complex campaign which bought together 14 
episodic films. It recently won a Revolution magazine award. 


2. Another big American phenomenon is Sports Illustrated 
magazine's annual swimsuit issue. Levi's was an issue sponsor, 
so Lateral came up with a screensaver featuring exclusive 
images from the magazine. Unsurprisingly, downloads were 
numbered in the hundreds of thousands. 


3. In contrast to its clean-cut work for brands such as Stella, 
Levi's and Boddingtons, Lateral’s own Website has a more 
streetwise, graffiti-style feel. One neat touch is the 2D 
representation of all the staff, linked to their email addressees, 
of course. 


5). J THOUGHTS oe 


ath pope designed by oraip tro w fiiptiogstyin?® 
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1. The movie concept of the Website for the Stella Screen is 
reflected in its left/right navigation rather than the traditional 
up/down scrolling. This was implemented using iframes. 


Faber and Faber 

Following a five-way pitch, Lateral has 
been appointed by Faber and Faber as 
its online agency of choice. Lateral’s 
first task is to redesign the main Faber 
Website with a content management 
system, enabling the relevant Faber 
staff to contribute to the site as part of 


their daily routine. 


Cassandra complex 


“Don't listen to anyone who tells you, ‘This is the way to 
design a Website’,” starts the Jon Bains how-to-design-a- 
Website spiel. Bains has compiled 20 commandments of 
Website design. Number one was: never use a Flash intro, a 
stricture Lateral broke by using a Flash intro on one of its 
award-winning sites. “We had to do it so the Americans 
understood how to use it,” Bains, himself American, jokes. 
More seriously, however, he says the most important 


aspect of Web design is not rushing in with Dreamweaver in 
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single general-purpose Website, the focus is more 
thoughtful by launching microsites in conjunction with 
TV ad campaigns. “A Website is not just for Christmas,” 
warns Bains. “If a client isn't going to have the year- 
on-year budget to refresh a site, it’s betterto doa 
targeted site that will last for three months.” 

He has the results to prove these guerrilla tactics 
work. “Levi's US wanted us to do something special 
and tied into charity around the holiday session,” he 
says. “We came up with two ideas: one was that for 
every pair of SilverTab jeans sold online, money went 
to charity. The other was a limbo game, as Silverlabs 
are designed for a certain shape of young woman. 
Every time you played the game, Levi’s donated 25 
cents to charity, or 50 cents if you played well.” Levi's 
total donation was $25,000: an amount it calculated 
would take three and a half weeks to generate. “It was 
reached in eight days and Levi's e-com partner sold 
out of jeans within 10 days,” Bains boasts. 


Games and 3D 


Another growth area has been 3D content, notably 
games, which is a Lateral speciality. “Yes, as well as an 
aftercare department, we have a gaming department 
too,” deadpans Bains. And the two-man grouping is 
certainly pushing the capabilities of Director 8.5. One 
technical demo shows a beautifully rendered 200-odd 
polygon car jumping ramps and sending physically- 
modelled crates flying. “One of the problems is we 
don't want to approximate PlayStation games so we're 
having to dumb down some of the content,” Bains says. 
“We'd rather take gaming concepts and use them ina 
manner appropriate to the medium.” 

Lateral also uses the 3D technology ina more 
abstract way by revitalising the cyberpet game on the 
RSPCA’s Website. The concept, which will launch in 


hand. “Preparation is key. You need to think what you want to 
say, and how and why the Website should evolve before you 
pick up that mouse,” Bains says. “Don't pick a technology 
before you know what you are doing.” 

For professional Web designers, Bains reckons the 
hardest thing is managing client expectations. “The client is 
often wrong in their base assumptions,” he says. “Equally, 
you have to realise that when you start a project you don't 
really know what the end point will be.” 


The year that was 


“| was really glad to see the end of 2001,” exclaims Jon 
Bains. “2000 wasn't great, but 2001 was a very bad 
year. Companies | liked and respected started 
disappearing for no good reason.” Even Lateral, with 
its strictly enforced 30-max headcount, was caught in 
the downdraught. 

“We got to the point last January where we only 
had two months of money left,” Bains explains. “As 
directors, we've always been transparent with the staff, 
so we presented the situation to them.” The result was 
around half the company took a voluntary pay cut, 
while the directors drew no wages at all. 

“It was a Friday,” Bains recalls. “We got the whole 
company together and said, ‘OK, on Monday we'll start 
pitching for new business’. Some bright spark piped 
up, ‘Why wait? Let’s start now’.” Out came the 
whiteboard; and one brainstorming session anda 
couple of phonecalls later, Lateral had secured 
£150,000 of work and staff got their money back. 

“If the staff hadn't been willing to take the risk and 
turn it around, | don't know what would have 
happened,” says Bains. “I don't think we would have 
shut down, but we would have had to scale back.” This 
year has been more fruitful. The company has recently 
won five significant contracts which will keep it going 


at least until the end of the year. 


the summer, is to create the cyberpet in 3D so users 
can see how the creature evolves and grows ina 
visually-rich environment via the RSPCA Website. 
SMS and email access is provided so users can feed 
and nurture their creatures away from the desktop. 

Just as Bains is watching the company he co- 
founded change, he is noticing the start of a new 
direction for the Internet. “I don't think where the Net is 
now and where it was back in the early 90s is very 
different,” he says. “We can make things move around 
the screen faster and the underlying technology has 
moved on, but the experience is still similar.” 

Broadband could have a significant effect, reckons 
Bains, although not in the way most people expect. “I 
don't think many companies have so much to say they 
require broadband,” he says. “If you were doing a film 
site you might want to host large files like trailers, but | 
wouldn't even say that was a great use of broadband.” 
Instead, Bains sees the migration of games consoles to 
broadband as a possible key driver. “Gaming is one of 
my pet passions,” he enthuses. “I bought an Xbox this 
week and the game Halo totally sucked me in, in the 
sense of being in an environment and its use of non- 
player characters. | think the next evolution forthe 
Web will occur when you get massively multiplayer 
games online for consoles like Xbox and PlayStation 
2.” You can bet wherever it ends up, Bains and Lateral 
will be there too, in some form or other. FEES 


Creating a game for your site, Lateral style 


Lateral takes you through the process of building a game for your site, from brainstorming to going live... 


a The client wants a darts game. In brainstorming 
sessions, different scenarios — such as online 
multiplayer, full 3D or isometric 2.5D view — are 
considered. But due to time constraints, a single player, 
2D approach is decided upon. 


4 | To enhance the gaming experience, a close-up 
Sniper view is introduced into the interface. This 
adds a gameplay element, making sure the game does not 
end up being a simple point-and-click affair. By using 
masking and some clever code, natural fuzziness of the 
controls and some nice visual effects are achieved, such as 
highlights and shadows. 


After the environment has been modelled, 

@ textured and tweaked, the darts are produced in 
the same way. A number of darts are rendered at slightly 
different angles to increase the visual quality and the 
feeling of randomness. 


The brainstorm notes are reviewed and committed 

to sketches, where Karl fleshes out the concept 
with the generic features, and a few conceptual ideas. 
Karl then produces digital versions of these for the client 
to approve. 


G The Sniper control and the attached power bar are 
the main user interface during the game, and 
combine the visual feedback of the two major darting 
problems (targeting and achieving optimal thrust) in one 
place. The longer the mouse button is pressed, the more 
powerful the dart is launched. 


AIM FOR THE ROUND 
THING ON THE WALL. 


8 | To increase the fun factor and the atmosphere of a 
professional game of Darts, Jeff, the commentator, 
comments on your every move. Pseudo randomness of 
these remarks is achieved by choosing one in a context 

sensitive array of all possible phrases. 


After the general look and feel has been approved, 

the issues of gameplay are considered. The goal and 
rules of the game, the controls, the visual feedback, the 
scoring, and the playability factor are taken into account, 
to make sure it's a fun and engaging game. 


G Using a low polygon editor, Karl constructs a simple 
backdrop pub interior for the game. This 3D 
rendering is then tweaked and enhanced in Photoshop. 
Details are added, such as artwork on the walls, pints of 
product, and subtle branding. 


9 | As the game is in beta, final tweaks are made to 
difficulty levels, bugs are ironed out, and the generic 
layout is implemented. The game is hooked up to the 
serverside high score database, and instructions, intro 
screens and logos are put in place. 
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Ly Expertise provided by Chris 
Schmidt. Contact Chris at 
[e] chris@trackd.co.uk, or via 
{w] www.track5.co.uk 


Files on disc 

The full version of Web Menu 
Builder lis free on the cover 
CD for PC users. There is also 
a demo of version 2 on the CD. 
or you can upgrade to the full 
version with our upgrade offer 
on page 45. The Hemera 
images used for the tutorial 
are on the CD — 1010 for PC 
users and 500 for Mac users. 
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Web Menu Builder 1 worn ga 


Creating drop-down Web menus is a breeze 


using the full and complete Web Menu Builder 1 


software found on this month's cover CD... 


| he principle behind drop- 
Al down menus has been 
if around as long as operating 
il systems have had the 
Graphical User Interface (GUI). Because 
this established and intuitive feature 
enables instant access to a huge amount 
of information, it’s no surprise to find, 
since DHTML made this possible in the 
v4 browsers, that they've been appearing 
on content-heavy sites ever since. 
However, even the most experienced 
coder will find including such a feature 
to be a complex, time-consuming task. A 
good understanding of DHTML, layers 


and JavaScript are essential if you want 
to hand-code such a feature. But thanks 
to Web Menu Builder, which you'll find 
on this month's cover CD, even the most 
code-shy designer will be adding them 
to their pages in no time. 

We'll be using some of the images 
from the Hemera collection which is 
also included on the CD. Installing both 
applications is very straightforward. Be 
sure to install both versions of Hemera: 
once you've installed the first, the 
second version will update the original 
so you can access all the images from 
the same interface. 


Part 1: Using Hemera Photo-Objects 


We're going to use some Hemera images in our menu... 


Exporting images 
When exporting your selected 
image you are prompted by 
default to save to a location on 
your hard drive. You can simplify 
the whole process by dragging a 
selected image directly from the 
interface after you've specified 
its dimensions and resolution 
into the application you want to 
use the image. 


i Hemera is presented as a searchable database 
of images. The main interface provides direct 
access to images via the large scrollable window, but 
these can be filtered either by entering keywords or 
selecting pre-defined categories. 


2 | If you click on a few random images you'll see 
how the name and description area updates 
itself. This is useful for familiarising yourself with the 
kind of terms used for different objects or for 
expanding on specific searches. 


4 | You are then provided with options for the 
exported graphics dimensions and resolution. 
Use the drop-down options to select different 
measurement units or the check boxes to maintain 
the ratio or flip the image. 


8 | Clicking Next then provides you with the final 
export options enabling you to determine the 
format and destination of your chosen image. 


3] Once you've settled on an image you'd like to 
use, simply double-click on its thumbnail 
preview to prompt your export options. Select what 
kind of application you'll be using the image in and 
click Next. 


6 | You can now include your selected image 
directly into your end app or work on within 
your image-editing software for further work. 


Part 2: Web Menu Builder 


Walking through the main interface features and getting to know how it all works... 


Configuring 


As with all production software, 
spending some time configuring 
the options will ultimately save 
time, give you a better 
understanding of the potential 
of the application, and improve 
your workflow. 


a Opening Web Menu Builder 1 shows a 
minimal interface divided into three main 
elements. The toolbar provides access to most of the 
main features while the left pane will contain the 
hierarchical structure of your menu. The larger right 
pane will contain options for selected elements of 
your menu. 


If you click on the Root entry you'll be offered 

options for the general appearance of your 
menu, including whether your drop-downs will 
operate horizontally or vertically, and the control of 
your overall menu's colour scheme. 


3 | As the Root only establishes the menu and 
doesn't display any options, we need to add 
these next. Select the Root and click the large + 
button just above it three times to create three 
untitled entries. These will operate as the base 
options in our menu from which the drop-down 
elements will appear. > 
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Part 2: Web Menu Builder continued... 


a The menu we're going to create will provide 8 | You can continue to add a Description which G With these simple changes in place now is a 
links to different categories of drinks, so click appears like a tool tip when the mouse is held good time to preview our work. The toolbar 


on each of the untitled entries in turn and name over the button. The Link and Link Target options provides a Preview button which generates your 
them Beers, Spirits and Cocktails by amending are self-explanatory enabling you to define where menu so you can see how it operates. The first thing 
the title fields in the right-hand pane under the the link should go to and how that should relate to you'll notice is the lack of drop-down options as all 
general tab. your active window. 


we've done so far is create the top-level options. 


Exit the preview, return to the main interface 9 | You can now repeat these stages for the Spirits 

and select the Beers option. Click the + symbol 8 | If you think of Containers as being sub-roots and Cocktails areas, adding nested Containers. 
to create a container which will hold the drop-down you'll get the idea of how the software works. Creating sub-categories within sub-categories 
options for our Beers category. If you click on the Click and highlight the container and add anumber _ should this suit your site's content structure. 
Container entry you'll notice the right-hand options _ of categories by clicking the + symbol. These can Remember to keep previewing your work so as to 
are the same as the main Root. then be respectively named Lagers, Ales and Stouts. _be assured of the best results as you go along. 


Part 3: Design features and integration 
Now the engine works, let's make it look more attractive... 


Colour coding 


Don't restrict yourself to giving 
all your container and menu 
items the same settings. 
Consider colour coding different 
areas and using style sheet 
principles to draw attention to 
areas of importance. Although 
styles can be copied across 
multiple entries providing a 
consistent appearance, you can 
still emphasise individual entries 
using coloured backgrounds or 
text effects etc. 


Individual menu entries have more 
comprehensive options for layout, positioning 


. Tweak the settings until the preview of an 
The first thing to decide is how the Root and and function providing more specific control over 


ge individual menu element best matches your 
subsequent Containers should appear. the final layout of your menu. Thankfully, as thiscan _ design. Then right-click over the item in the left 
These offer control of background and border become a repetitive task on larger menus, Web pane and select the Copy Style option. You can now 
colours etc, and more overall preferences of your Menu Builder enables you to copy such styles across _ apply this style by right-clicking other menu items 
menu's appearance. numerous entries easily. individually and pasting from the contextual menu. 
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Part 4: Adding images 


Liven up your menu with graphics... 


Visual reference 


Using graphics within such 
navigation menu systems can be 
auseful way of labelling 
categories, providing visual 
reference to users who may not 
speak a site's native language 
fluently. However, they do take 
up screen space, need to be of a 
reasonable size to be 
distinguishable and, ultimately, 
result in slowing down your 
site's delivery so weigh up the 
benefits before committing to 
such an extra. 


Double-click on a suitable Beer image to 
prompt the export Wizard and select the Web After clicking Next again you are offered the 


Pt Adding images to our menus is a 
straightforward task and enables for easier 
identification of menu contents. Open the Hemera 
collection and use the pre-defined category of 
“drinks” to filter content to more specific results. 


Authoring option before clicking Next. We're going 
to reduce the graphics to dimensions of no more 
than 32 pixels, so ensure the aspect ratio is 
maintained before resizing to 32 pixels high. 


chance to set a background colour for your 
image. Make sure you give the same hex code, as 
the Root container specifies and click next to save in 
your preferred format. 


4 Back in Web Menu Builder select the Beers 
menu item and access its Images tab. Here you 
can enter the location of your Beer graphic within — 
the Icon field. Adding an entry in the Mouse Over 5 | Experiment with the best layout and 
field will activate a second image on rollover. positioning settings before running through 
However, if this is left blank then the normal state the process again for the Spirits and Cocktails 
image will remain visible. menu graphics. 


G One last feature to look at before we export 
the finished menu is the way the drop-down is 
triggered and operates under the Sub Container tab. 
This enables basic transition effects and positional 
attributes adding a little more polish to your feature. 


Part 5: Generating the code 


Taking the menu and integrating it with your Web pages... 


Experiment 


Before you go ahead and start 
working on your site's new 
navigation, it is recommended 
that you experiment ona basic 
model and notice how this 
migrates from within Web Menu 
Builderand your site. Pay special 
attention to how absolute and 
relative links between files, 
graphics and destinations work 
to save a few headaches when 
embedding such a feature on 
larger sites. 


Wwe 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www. u3.org/TR/htm14/ loose. dtd”> 

<HTML> 

<HEAD> 

<script language="Javascript?.2" src= "wmb_menu, js™</script> 
<script language="Javescripti.2" src="wmb_ def, js"></script> 
</HEAD> 

<BODY> 

<!-- Move the following 2 lines where you want to place your menu --> 
<DIV class='wmbmenubar' id="c_r"></DIV> 

<SPAN class='wrbmenupin' id="c_rpin"></SPAN> 

</BODY></ HTML> 


Copy the two js JavaScript) files inside your site's structure and integrate the code into your Web 
pages as above. If in doubt, use the generated HTML file to double-check the code settings. It's as easy 

as that! Your site now includes an impressive drop-down navigation menu system, enabling your visitors 

direct access to much more of your site’s content than is possible through more traditional methods. 


Exporting the code is simple; hit the Generate 

button in the toolbar. The software will then 
create two JavaScript files for the core menu and the 
menu definition plus a sample HTML file. 
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Are you being served? 
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[Web Menu Builder 2] 


Get all the new functionality and browser compatibility of the latest version of this app... 


ow that you've tried version 1 of Web Menu creations — unlike WMB7, its menus are compatible and preview your menu within the application before 
Builder from our cover CD, you'll have with Netscape 6 and Internet Explorer 6. That's not all. exporting it. And, if you make the upgrade you'll be 
realised that the application is great for Glow, transparency, slow pop-up, and horizontal and able to take advantage of V-Tech’s helpdesk, which is 
quickly designing and creating drop-down diagonal menus are all special new features that will only available to users of Web Menu Builder 2. 
menus. Visionary Technologies now offers you the be at your disposal. Plus you can add Flash animations The price of this upgrade is just £30 ($40). That's a 
chance to upgrade to the latest version and take to your creations. saving of 10 percent for our readers. And, as it’s a 
advantage of improved special effects, greater The program has a faster and lighter menu engine download, there's no postage or packaging. cars 
browser compatibility and Flash compatibility. for the Web. You can use the application's tree-like ’ 
Using Web Menu Builder 2s critical if you want the menu structure to manage the development of your 
maximum number of people to be able to use your menus, use the parameters to customise your menus, 


To order Web Menu Builder 2 visit 


mwww.v-tech.ws/orders/wmborder_ca.htm 


Alternatively, phone or fax your order on 


tq +toZ 63365 200 
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Your 1510 Photo-Objects 


You'll find 1010 images for the PC and 500 for the Mac, on our CD, which 
you're free to use in your Web design... 
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Mac: Wildlife - Bumble bee 3 
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PC: Vegetables - Red chili pepper 


PC: Rloys - Teddy bear 23 


PC: Cars - SS Ford Panel Van 


PC: Food - Sushi platter 10 
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PC: Animals - Bactrian camel 3 


PC: Sweats and treats - Choc bar 6 


Mac: Agriculture - Tractor with roller 2 


PC; Pets - Hedgehog 4 


About your Photo-Objects 


Start here before using the royalty-free Photo-Objects by Hemera on your CD... 


This issue we've teamed up with Hemera to bring you an amazing 1510 images on our cover CD. The images are royalty-free 
Photo-Objects from Hemera’s range. When you install the Photo-Objects browser from our CD, a Software License 
Agreement pops up, outlining how the images may and may not be used. They are royalty-free and you can use them in any 
way you like, within the guidelines stated. We recommend you read this agreement before using any of these images in your 
sites or other design work. 

The range of free images on offer is fantastic. PC users will find they're broken into some 40 different categories. 
Meanwhile, Mac users will find them arranged into 16 sections. If you need an image for a job quickly, have a browse here 
before going to the trouble of arranging a photoshoot or buying an image in from a library. If you like what you see here, 
consider buying the full version of Photo-Objects. It comes with 50,000 royalty-free Photo-Objects like these, and costs 
£70.44. It's available at [w] www.softwareparadise.co.uk. 

See our tutorial starting on page 40 to find out how you can use these 
images in the sites you build. 


GraphicsDesk 

Also on our CD, you'll find the free software available for browsing Hemera’s new 
GraphicsDesk online service. If you need an image on a one-off basis you can 
search Hemera’s collection online. A subscription for the service costs as little 
as $9.95 per week, or $169.95 a year, but before you decide, check out the 50 
free sample images that are available at the site. Install the GraphicsDesk 
browser software from our CD (PC only). It will link to the site via your online 


connection. Or you can visit GraphicsDesk at [w] www.graphicsdesk.com. 


PC: Communications - Olive rotary phone 


Mac: Lifestyles and culture - Mask 37 


PC: Computers - Delete 


PC: Weapons - Hunting knife 
PC; Fruit - Kiwi half 2 
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Access all areas 


Web accessibility may be politically correct, but some 
designers are worried that growing pressure for sites that are 
accessible to all could hamper creativity... 


epending on who you listen to, accessibility is 
either the most fundamental issue to Web 
development, or a rather prickly term that is 
coined to aggravate creatively-minded Web 
designers. Whichever side of the fence you are on, 
there is no denying that accessibility issues are not 
going away. 

In February of this year, the legal stakes were raised 
when the latest code of practice from the Disabled 
Rights Commission included specific references to 
Web accessibility. But perhaps it’s Macromedia's 
recent inclusion of accessibility features in its MX 
range that has fuelled the debate. Last December, the 
company announced plans to offer an Accessibility 
and E-learning Solutions kit with the inclusion of 
design tools and an online accessibility course. 

At the end of April, Macromedia launched the next 
stage of its Web accessibility offerings that include 
Dreamweaver MX, and the newly released Flash MX 
(available as part of the Studio MX package). The 
major enhancements to Dreamweaver include 
accessibility compliance tool checks that help 
designers ensure Web pages work with screen 
readers. According to Kevin Lynch, the chief software 
architect for the San Francisco-based software 
company, the new products are designed to improve 
the way Web applications on the Net are presented. 

“I think the delivery of applications on the Internet 
has been defined by the infrastructure, and the end- 
user experience has been kind of secondary. We think 
that needs to change,” he says. 


Accessbility for all 


The stated aim is accessibility for all, and the new tools 
and products aim to address those accessibility issues 
that affect every Web user. For instance, by not forcing 
browsers to redraw an entire page just to present one 
new bit of information, Flash-centred pages will now 
save bandwidth and associated costs. 

However, there is no doubt that Macromedia's drive 
to change the way the Web works (as more than one 
critic has put it), is in part inspired by growing pressure 
to adopt accessibility standards. In September 2001, 


the World Wide Web Consortium (W3C) issued draft 
accessibility guidelines for designing browsers, 
multimedia players and other Web-based user 
interfaces. An amendment to the US Rehabilitation 
Act added to legal pressure on designers in the US. 


Accessibility and the law 


Even in the UK, the last few years have seen mounting 
legislation that impacts on the role of Web designers. 
Section 21 of The Disability Discrimination Act (DDA), 
which makes it unlawful for companies offering 
services to the public to discriminate against the 
disabled, came into effect in October 1999. According 
to Michael Coyle, founder of the Internet law firm 
Lawdit ([w] www.lawdit.co.uk) and director of the UK 
Web Design Association ([w] www.ukwda.org), this act 
has implications forthe Web design industry. 

“A Website is a service to the public — be ita site 
selling goods or services, or one which simply provides 
information — and as such would appear to be subject 
of the provisions of the DDA,” he explains. “The DDA 
requires service providers to take such steps that are 
reasonable in the circumstances to ensure that 
disabled people have access to the services.” 

Although Websites aren't specifically mentioned in 
the act, the code of practice that accompanies it was 
published by the Disability Rights Commission 
([w] www.dre-gb.org) in February 2002, and makes 
explicit references to the Web. In September 2002, 
another related act — the catchily titled Copyright 
(Visually Impaired Persons) Bill — will come into force 
and add further weight to the accessibility cause. 

So what exactly are the steps that designers should 
be taking? “Problems you might uncover include those 
caused by images with no alternative text, confusing 
navigation systems, or problems resulting from the use 
of frames,” says Coyle. He advises designers to test 
sites under various conditions, such as turning the 
scripts and style sheets off and browsing without using 
a mouse, to see if there are any problems. 

However, although significant, the legal 
implications need to be kept in perspective. While 
there is no shortage of inaccessible sites (a survey > 
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Guidelines on Access 


Make sure your sites meet the 
accessibility mark, by following 
the guidelines below... 


ing user will be aided by a written transcript of @ 
sound file on a Web page. Bobby will recommend that these be added if they 
donot already exist 


Many people with disabuities use epecial Web browsers, uch ae one that 


A quick and easy Website accessibility test can be 
taken at the Bobby site. It analyses a Website's 
implementation of Web usability guidelines. 


Check your site with Bobby 

No, not Davro. Bobby ([w] www.cast.org/bobby )is a 
tool for Web page authors. It aims to identify changes 
needed so users with disabilities can more easily 
access Web pages 


Provide text alternatives 
If you are catering for the visually impaired, it is wise 


to provide a text equivalent for all non-text items. 


Provide information 
The AA site ([w] www.theaa.com) includes a section 


full of relevant information for disabled visitors. 


Inform clients 
According to Graphico's Graham Darracott 80 per cent 
of clients have no idea about accessibility. 


Use scrolling text, animated graphics 

and horizontal lines sparingly 

These may look attractive but can be a distraction 

for users who need narration software to interact with 
the Web. 


For more guidelines visit the W3C’s Web Accessibility 
Initiative ([w] www.3g.org/WAI) and RNIB's site 


([w] www.rnib.org/digital). 


last year of sites run by FTSE 100 companies revealed 
that 94 per cent had no accessibility features), no case 
involving a Website has yet to be heard in the UK 
under the terms of the DDA. “At this stage it would 
seem any service providers aware of the provisions 

do not really expect a case to be brought, and any that 
are could easily be paid off before reaching court,” 
says Coyle. 

That is not to say this will be the case when the issue 
of Web accessibility becomes more prominent among 
the disabled community. Already, in other countries 
with similar legislation there have been a number of 
high profile cases, such as that brought against the 
Sydney Olympic Games Website. In the US, the 
National Federation for the Blind recently sued AOL 
because its interface was not accessible to the 
screen-reader software used by the blind. Ironically, 
the UK site has received the most flack about 
accessibility is the government's own Gateway site. 

Simon Halberstam, head of e-commerce law at 
Sprecher Grier Halberstam ([w] www.weblaw.co.uk), 
believes the real issue is relevance. “If a site is unlikely 
to have a specific appeal to a disabled audience the 
legal risk is minimal. However, those sites which are 
likely to attract the disabled in large numbers, such as 
the Olympic Games site, should make sure they are 
accessible to it,” he says. 


Although still a minority group, it is easy to 
underestimate the numbers of people affected. For 
instance, there are two million people with sight 
problems in the UK. Of course, not all disabilities 
affect Web access, but many do. 


An extreme challenge 


Ethical and legal issues aside, this is a market with 
£33 billion annual spending power. Considering 
that the government's E-Envoy office intends for 
everyone to be online by 2005, this figure becomes 
even more significant. 

The issue of accessibility has been raised further by 
the W3C's Web Accessibility Initiative which 
encourages designers worldwide to make sites 
accessible. “The power of the Internet is in its 
universality,” claims Tim Berners-Lee, head of the 
WSC and inventor of the Web. “Access by everyone 
regardless of disability is an essential aspect.” 

Access by everyone is an extreme challenge in the 
present technological environment. “The main 
problem is that most people have got various degrees 
of limitation,” says Kevin Carey, vice chairman of the 
Royal National Institute of the Blind (RNIB). 

As the number of Web users grows and as sites are 
more technologically complex, the issue of 


The Sydney Olympic Games Website 


Make sure your site is accessible early on... 


The Sydney Olympic Games Website ended up in court after 


an accessibility dispute. In August 2000, the Sydney 
Organising Committee for the Olympic Games was found to 
have engaged in unlawful conduct by providing a Website 
which was to a significant extent inaccessible to the blind. 
The Australian Human Rights and Equal Opportunity 
Commission ordered the Website to be made accessible by 


SYDNEY 2000 OL} 
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the start of the tournament. The site was subsequently told 
to include ALT text on all images and image map links, as 
wellas to ease access to the results on the Website during 
the Olympic Games. On 6 November 2000 (after the 
Sydney Olympics) the Website was found to be only partly 
compliant and $20,000 damages were awarded to the 
original complainant. 
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The Sydney Organising Committee for the Olympic Games were found to have engaged in unlawful conduct by providing a site 


which was, to a significant extent, inaccessible to the blind. 
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Copyright Bank 


Send us your work online, and we 
will register your copyright 
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All you need to know about acquiring 
and registering your domain name. 
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The Lawdit Website, [w] www.lawdit.co.uk, provides advice on how to stay legal online. 


accessibility is not one which affects the disabled 

alone. Browser incompatibility, the inability to view 
certain graphic elements (typically Java and Flash) 
and bandwidth constraints all impact accessibility. 

Although everybody has different limitations, in 
most cases Web designers are usually asked to design 
only one Website fora client. Cana one-size-fits-all 
approach really work? David Lyons, the disability 
technical officer for the University of Essex, seems to 
think so. “Simplicity and ease of use are the keys to 
accessibility,” he claims. “If itis good for disabled 
people, it is generally good for people full stop.” In 
other words, accessibility and attractability can 
become the same thing. 

Indeed, most of the main influential accessibility 
guidelines (such as those put forward by the 
government, the RNIB, and the W3C) emphasise the 
need for simplicity and good usability. Yet often these 
principles are interpreted as anti-creative, leading to 
dull and unimaginative Websites. 


Industry nerves 


“I think there is a general nervousness in the Web 
design industry right now about this issue,” says 
Graham Darracott, Marketing Director of Web design 
firm Graphico New Media ({w] www.graphico. 

co.uk), the company responsible for the new Westlife 
site. “People are watching the growing implications of 
the legal measures very carefully, and are worrying 
about where the limits will be placed. Designers dont 
want to feel obliged to design identikit sites with 
clunky, Fisher Price-style features.” 

Darracott feels that some of the current pessimism 
is misguided. “It is not automatically the case that 
accessible sites curb creativity, often it means simply 
allocating a section to a disabled audience. This would 
play a similar role to TV subtitles that supplement 
rather than replace the original content,” he says. 


While Darracott believes an industry-based code of 
practice would be helpful, others disagree. 

“There are so many kinds of people and so many 
kinds of content, and both are evolving everyday,” says 
Todd Puragson, owner of US design firm Juxt 
Interactive ([w] www,juxtinteractive.com). “If you say 
this works and we should never deviate from it, a lot 
will go undiscovered and the Internet will stagnate. 
Knowing your audience and what they need is the key.” 

Amore positive outlook is possible. Not only can 
accessibility be looked at ona site-by-site basis, but 
many believe it is wrong to consider it as imposing 
limits of the ‘creative artist’ within every Web designer. 

“It is perfectly possible to develop fully-accessible 
visually-pleasing Websites, it just takes a bit of 
thought,” says Tim Culhane, a software engineer with 
Dublin-based Internet communications development 
company, Critical Path ([w] www.cp.net). “There is no 
reason why graphics should effect the accessibility of 
a Web page. However, if you are catering for people 
like myself who need to use a screen reader to access 
the Internet, alternative text should be used in the 
HTML code in order to describe graphics.” 

Many designers also believe accessibility and 
creativity can go hand in hand. “Since when did stuff 
have to look ugly in order to work well?” asks Curt 
Cloninger, designer and author of the book Fresh 
Styles for Web Designers. The question, of course, is 
rhetorical. A growing number of UK sites, such as 
those of the AA and Tesco.com, are proving that 
accessibility does not have to get in the way of design. 

So if you are working on a site that falls under the 
‘service to the public’ bracket, and let's face it, that 
includes a lot of sites, then accessibility issues need to 
be considered. This may mean following the guidelines 
in the box, or making sure your site is tested by people 
who are likely to experience accessibility problems. 
What it doesn't mean, however, is that you have to 
design a site in a “clunky, Fisher Price style.” EES 


Tesco access 


The RNIB Accessible Website logo... 


The UK’s homegrown e-commerce success story is 
now banging the drum for accessibility. Following 
complaints from blind and partially-sighted Internet 
shoppers, and campaigning from the RNIB, Tesco.com 
made its online store accessible to people with sight 
problems, and received the first RNIB “See It Right 
Accessible Website” logo. 

The RNIB Accessible Website logo provides a 
mark of approval to Websites that can be used 
successfully by the visually impaired. Tesco's 
accessible online store ([w] www.tesco.com/access) 
provides people with sight problems with the 
opportunity to shop independently, when they are 
normally reliant on friends and family to help with 
their weekly shopping trip. Most significantly, this site 
proves that accessibility does not need to get in the 
way of the overall site design. 


Customers can See It Right at Tesco's Access site at 
[w] www.tesco.com/access. 


Gateway 


‘The Government Gateway is the centralised registration 
service for e-Government services in the UK. 


tering with the Government Gateway enables you to sign 
's services that are available 


\VaT retums. Forms can be sent using appropriate 
web sites, portals or third party software packages, 


Click the Soya button to proceed to the secure Government 
Gateway ste, where you can register for online Government 
Services or, once registered, log in 


According to Australian Web expert, Tom Worthington, the UK 
Government's Gateway site is poorly designed and 
discriminates against disabled users. 
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MEET THE RABBITS KESUSO MEER 


1. European advertising agency, Asatsu, wanted its site to show its extensive knowledge of European culture, but with images that 
brought comic relief to the site. David says, “We sifted through thousands of images by Martin Parr and chose eight to play off.” 


2. Designed with the increasing text message market in mind, Text Match is a part of the WOYWTDWI? digital festival. The game 
can currently be played online, but kiosks are planned to be dotted around the country in the near future so everyone can joinin. 


3. WDYWTDWI? also featured a Big Brother-style Meet the Rabbits where viewers can watch the rabbits via the hutchcam. 
Visitors can create their own rabbit, or anything that takes their fancy, with the interactive Etch-a-Sketch. 


4. Radical PR/marketing company, The Fish Can Sing, challenges the traditional industry rules, which is reflected with its site. 
The index is presented as a Continuing flow of words to portray how language appears in our text message/email literate world. 


5. From start to finish, Wild at Heart took three years to complete, with each petal being designed individually in Flash. 
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“What we try not to do is be the same as everybody else,” says co-Creative Director, 


Nathan Lauder, about the digital and analoque design company Fibre... 


he first thing that grabs you when looking 
through Fibre’s portfolio is its individual and 
experimental style. And with its varied client 


with different designs and media. 

One of Fibre's largest clients is Motorola. Previous 
work for the company includes the Motorola- 
sponsored What Do You Want To Do With It? ICA digital 
festival. Along with coming up with the festival’s 
identity, Fibre also worked on the poster campaign, 
postcards, game and designed the Website ([w] 
www.whatdoyouwanttodowithit.com), which features 
an online Etch-a-Sketch for visitors to post their own 
creations. This feature was created in Flash 4. “It’s an 
invisible grid made up of 15,244 individual movie 
clips,” says David Rainbird, the other co-Creative 
Director. “We did a number of tests with different 
designs and programming strategies, then chose this 
approach for style and functionality. Nevertheless, we 
were still amazed that this was possible with Flash.” 

With this project came Text Match, an online game 
which requires the player to translate a normal English 
work into SMS text language against the clock. The 
site has just been nominated for a D&AD award, which 
are held in May every year. 


All of Fibre’s work is created on Macs between 
David and Nathan, with the help of their two designers. 
The company uses a plethora of software packages — 
Illustrator, Photoshop, QuarkXPress, Flash, After 
Effects, Premiere... the list goes on. “Flash has taken a 
lot of ourtime, as there is a lot of animation work that 
can be done with the application,” says Nathan. But ifa 
brief requires a package that neither David nor Nathan 
are familiar with, they will go out of their way to learn 
something new. “We did some 3D work so we brought 
in Cinema 4D and | had to learn it in a day,” says 
Nathan. “It was a great challenge.” 

When designing Websites, David and Nathan look 
at the brief from the perspective of the potential 
visitors, asking themselves questions as they go along, 
such as: how should a certain site be navigated, and 
how should it look on-screen? “We enjoy combining 
different tools instead of just saying, ‘Oh, we'll design 
that in Photoshop’,” says David. “It’s amazing what we 
can do if we start in one program and take it through 
several others — it’s far more interesting that way.” 

Fibre's versatility has paid off with several DAD 
award nominations for various pieces, as well as 
winning an award for the Diesel Style Lab site, 
55DSL ([w] www.55dsl.com). The site won the award 
for its aeronautical theme. Visitors can click on 


bags and unpack them to see the clothing range, an 
interactive radar map lists the brand’s stockists and 
a departures/arrivals board shows all planned 
events information. 

A vast amount of Fibre’s work is gained via word of 
mouth from other companies. “We receive work mainly 
through referral; if a previous company doesn't have 
any work, then they will mention Fibre to other 
companies that they are in touch with.” 


Open-minded design 
Working closely with its clients is an important part of 
Fibre’s Web design process. After David and Nathan 
have gone through the brief and come up with some 
initial ideas, the whole process begins. The ideal 
situation is for the client to be as open-minded as the 
guys from Fibre themselves. “We do find it hard to work 
with people who do not understand where we are 
coming from,” says Nathan. “We will turn work away if 
we feel we can't achieve what we usually achieve.” 
Once the initial ideas have been thrown back and 
forth between client and designers, it’s not always a 
quick process from there. To design a complete site 
can take anything from two weeks to three years to 
complete. Wild at Heart ([w] www.wildatheart.com) is a 
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specialist florist service that has recently gone live. 
From the initial reading of the brief to the stage where 
it’s at today, it has taken almost three years to 
complete. “Much of the site was designed in Flash, 
with each rose petal on the intro page being created 
individually,” says Nathan. “It took one of our designers 
a whole day on the petals alone.” 

Creative directors David Rainbird and Nathan 
Lauder launched Fibre in 1998 after years of planning. 
“We didn't just wake up one day and say, ‘Oh, let’s start 
Fibre.’ For years before we started it, it never seemed 
right until we actually did it,” says Nathan. 

Both David and Nathan left the London College of 
Printing in 1990 and took separate career paths, 
working for different advertising agencies and small 
design companies. David says, “We came back 
together after eight years to set up Fibre and bring all 
the different strands of our careers together.” And it’s 
those strands that give the company its unique 
qualities that work across all media: print, video, 
CD-ROM or Web design. Fibre will use whatever fits 
the client's brief best with work ranging from very 
corporate to the youth market. 

The Web industry is such a cut-throat business, 
but it’s the company’s passion for that industry that 
keeps them going. “It’s what! have wanted to do since 
| was a child,” says Nathan. “I kind of feel as though 
I've never had to work because | enjoy it so much.” 
David adds, “It’s a chance to make money out of 
being creative.” 

But the main thing to consider is that everyone has 
to be happy; the client has to be happy with what is 
being produced, and Fibre has to be happy that its 
project is unique and different to everything else 
currently out there. Nathan says, “We don't just 
produce other people's work; we're not a factory. 

We'd much prefer to come up with creative solution 
to anything that’s thrown at us.” EEE 
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1. Award-winning interactive site, 55DSL, uses an aeronautical theme to display its 
clothing range, with the site being designed around an airport scene. Visitors can 
also attempt to land a 747 airplane at night with just the help of the runway lights. 
Your score is calculated by the amount of fatalities you cause. 


2. Stride was one of Fibre’s favourite sites to work on, and the one David and Nathan 
are most proud of. “The clients were easy to work with and up for us having fun,” says 
Nathan. “It just felt right and came together well.” 
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To create an animation of flower 


those created for the Wild at Heart 
Website, the petals need to be filmed at 
150 frames per second, then slowed down 


to 25fps and converted to DV format. is added. 
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Edit the footage in Adobe Premiere 
petals falling in slow motion, like and export them at an appropriate 
size as a series of GIF images. The GIFs can 
then be imported into Flash as a sequence. 
Lock the Image layer so that a new layer 


Using the GIF images as a guide, 

every petal in every frame needs to The Motion Blur effect is created by 
be drawn by hand. Each petal is created using three instances of each petal in 
with only three shapes: an outline shape, a every frame, and adjusting the alpha and 
highlight shape and a shadow shape. This positioning of each instance. Slow the 
is enough to define each petal and ensure animation further to 20fps. When the 
that the Flash file isn't too large. Each petal animation plays the effect looks like a 
can now be converted into a symbol. realistic Motion Blur. 
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Illustration: Pamela Holden>[e] Pamela@subdued.co.uk 


Photoshop 7 
and the Web 


We take a practical look at how the new 
features of Photoshop and ImageReady 7 can 
help you create better Websites... 


espite Photoshop's origins 
in print and photographic 
work, it has long been the 
tool of choice among the 
vast majority of Web designers. The 
inclusion of ImageReady in version 5.5 
supported this, and many of the more 
frequently-used tools have been finding 
their way into Photoshop ever since. 

Using designs already produced for 
the development of a simple 


promotional site for a saxophone 
quartet, the following pages take a look 
at some of the newer Web-specific 
features included in the latest versions 
of both Photoshop and ImageReady. 

You'll find the working files in the 
Tutorial\PS7 folder on the CD so you 
can see how the site was created and 
produced, as well as how Photoshop 7 
helped speed up the process of creating 
better Websites. 


Part 1: Meet the layout 


The first thing to do is take a look at the task in hand... 


The client 


The designs used in this tutorial 
were taken from a track5 
Website for a saxophone quartet 
who wanted a small promotional 
site at minimal cost. Many of 
Photoshop 7's new tools enable 
track5 to create a more stylish 
site efficiently saving the client 
money in time costs. Youcan 
take a look at the finished site at 


[w] www.paragonsax.com. 


G Open layout.psd from the Tutorial\PS7 folder 
on the CD to see the layered template for the 
general page design. The file has been prepared and 
reduced to its core components, so it shouldn't take 
you too long to get familiar with. To convert to a 
Web page we need to consider how it will be built. 


The three main components of background, 
header and footer elements are easily 
identifiable and shouldn't present any problems. The 
navigation is also contained conveniently so this can 
be created separately and included in the final build. 


Part 2: Generating background patterns 


Creating a background and using the new Pattern Maker tool... 


Patterns 
from layers 


The Pattern Maker can be used 
directly from layered Photoshop 
files by first selecting the layer 
you want to experiment with. For 
an easier life, run this through a 
duplicated layer as the results 


will overwrite your original layer. 


pe Layer (SAREE) Fiter View Window Help 


at Ctrlta 


povels/inch lisa) 
Deselect Ctrl+D st 


Inverse ShfteCol+i 


Color Range: 


Modify 


Transform Selection 


Load Selection 
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1 | To create a traditional background select the 
lines layer in the Layers palette and Select>All. 
Copy and create a new file — the new canvas is 
created matching the dimensions of the object held 
in your computer's clipboard. Paste the layer into 
your new canvas. 


4 | If you want a quick background that is a little 
more random, Photoshop 7 introduces the 
new Patter Maker tool which can produce 
interesting and experimental results. From your 
original background image go to Filters>Pattern 
Maker to prompt the interface. 


To achieve similar results from the original 

design, fill the background with black and then 
drop the opacity of the lines layer down to around 
50 per cent. You'll notice, however, that the design 
is irregular, which will lead to a noticeable seam 
when tiled. 


Use the settings on the right to determine your 

pattern's dimensions and preferences for the 
pattern's offset, smoothness and detail. Then use 
the Marquee tool to select an area from which the 
pattern will be calculated before hitting the 
Generate button. 


paragon saxophone quartet 


When converting the design into Web 

elements, the blurred highlights that bleed into 
the main body area need some consideration. We'll 
come round to that after we've got the background 
as we want it. 


Distance: 100] pixels 


ae To get round this irregularity, apply Motion 
Blur at an angle of 0 degrees and decide 
whether the amount of texture warrants precious 
bandwidth with a large tile, or if cropping down to a 
1 pixel wide graphic for embedding into your HTML 
is the best option. 


Tile History —————— 
[J Update Pattern Previe 


G Keep experimenting with your results using the 
Generate Again button until you have a few 
results you are happy with. You can then preview 
them using the controls below the Tile History pane 
before making a final choice. > 
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Part 3: Preparing your Web graphics 


Improvements to Photoshop's Save for Web feature... 


Faking JPEG 
transparency 

Knocking out colours for 
transparency can only work 
under the GIF or PNG-8 formats. 
If the original image contains 


fet image Layer Select Fer View Window Heb 


variable tones best suited toa 
JPEG, but you still need the 
transparency, then you should set 


your GIF's colour reduction 
method to Perceptual and 
experiment with the Dither 
options for less banding and 


more realistic results. 


so Return to the layout.psd file from the CD and 
make sure you can see the guides keeping the 
View>Show>Guides option checked. Crop around 
the third row (under the navigation) and enter the 
Save for Web tool under the File menu. 


4 | You will notice that your selected colour is 
highlighted in the colour table; underneath 
this you will find the new option added to the 
previously available tools. Simply clicking on this will 
remove any instance of your selected colour. Repeat 
until you are happy with the results. 


| fo Tranepaee.. 
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Our main problem now is that we need to 

knock out the background so the image seams 
into the Web page's background. A feature new to 
Photoshop 7 enables colours to be selected and 
mapped to transparency directly from the Save for 
Web interface. 
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G Using this option to knock out basic 
backgrounds saves time setting matte options 
when creating transparent GIFs. However, the real 
power of this feature is more apparent in complex 
images such as our example where the difference 
between foreground and background objects isn’t 
as obvious. 


Part 4: ImageReady rollovers 


Creating slices and rollovers for the site's navigation... 


ImageReady 
improvements 


With its new features, 
ImageReady has become a more 
efficient tool for the Web 
designer. Even the most HTML- 
phobic pixel-pusher will find the 
improved interface and 
functionality enables them 
access to more options that 
would normally bein the realm 
of the coder. 


1 | Open the nav.psd file from the Tutorial\PS7 
folder on the CD from which we'll create the 
site's rollover navigation buttons. Make sure that 
you can see the guides; take a moment to see how 
the layers have been organised and notice how 
we've created hidden Over State layers. 
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Hit the Jump to ImageReady button at the 


bottom of Photoshop's toolbar to bring the file 


into the sister program. If you're unfamiliar with 
ImageReady you'll notice many similarities with 
Photoshop, but take a look around to get your 
bearings before continuing. 


As transparency is only supported in the GIF 

format choose this, set the Colour Reduction 
and Dithering and check the Transparency option. 
Then select the Eyedropper tool from the selection 
of tools to the left of the Save for Web interface and 
click on the dominant background colour. 


r 


'[] Pattern Transparency Dither mE | 
Noise Transparency Dither FEE] | 


G Having said that it isn't as obvious, though, 
you can now decide whether or not to dither 
your transparency colours and, if so, whether they 
will be determined by Diffusion, Noise or Pattern. 
And if that isn't enough, you can even adjust the 
level of Matte required in such an instance. 


Iphone quartet 


The first thing to do is create the slices around 

which the rollovers will be based. Select the 
Slice tool and drag around the sections marked by 
the guides to create for the six text entries; the main 
logo that is to the left of the canvas will assign itself 
as the first. 


G Make sure that your Windows>Rollovers 
palette is checked and visible; you'll notice 
that your defined slices have automatically been 
given entries. Double-click the titles to give them 
more logical names so you can identify them more 
easily as we continue. 


Whichever method you use you'll end up with 

an Over State being added by default to your 
chosen slice or layer. If you need to change the 
event handler that triggers the rollover simply 
double-click on the Over State layer and choose an 
alternative method. 


Arollover state can now be selected and, by 

clicking the newly available button that is at 
the bottom of the Rollovers palette, a number of 
keyframes are added. These keyframes can be 
modified through the Animation palette by going to 
Window>Animation. 


Next, select each of the slices that we created 

in turn from the Rollovers palette. Then either 
click on the Create Rollover State button at the 
bottom of the palette, or choose New Rollover State 
from the Palette menu. 


8 | To edit the second state image select and 
modify the relevant Rollover layer and amend 
the HTML properties through the Window>Slice 
palette. In this case we can simply hide the original 
layer and display its relative Over layer to create a 
simple colour change in the contained text. 


11 | The Animation palette enables you to add 
frames as necessary and create basic frame- 
based animations that can liven up your Rollover’s 
buttons and create imaginative results quickly, easily 
and efficiently. 


An alternative method is to select layers 
directly in the Layers palette and hit the Create 
Layer Based Rollover button at the bottom of the 
Rollover palette. We haven't used this method in 
this case, as there is no obvious imagery behind the 
text to assign an action to. 


Thumbnail Size —_———— 


ONone 


9 | To take things even further and include 
animations on the second state image, you 
may need to activate the Include Animation Frames 
in Rollover Palette Options to make the Create 
Animation Frame Button available for use at the 
bottom of the palette. 


You can continue with further changes before 

exporting the final file via the File>Save 
Optimized As to generate the HTML and reliant 
graphics automatically, which will speed up the 
creation of pages sane when put in context 
of an entire page layout. 
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PNG explained 


The Web has a new king of image formats. Step aside old 


pretenders, the time has come for PNG to take the spotlight... 


f you could replace all the GIF graphics on 
your Website with files that were between 
five and 25 per cent smaller, you'd do that ina 
heartbeat wouldn't you? Say you had a page 
full of photographs — wouldn't it be useful to have a 
format that could render them more accurately and 
with less distortion than JPEG? That format does exist 
— and every major browser supports it. There has never 
been a bettertime to switch to PNG. 

The Portable Network Graphics format was initially 
Proposed to replace GIFs (Graphic Interchange Format) 
on the Web. GIFs were already showing their age back 
when the PNG format was first conceived — a 256- 
colour fixed palette format is far from future proof, and 
the LZW (Lempel-Ziv-Welch) compression algorithms 
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it uses are 15 years old. They're also copyrighted by a 
company called Unisys, who started collecting 
royalties from all the companies who made products 
capable of creating GIF files back in 1995. As was the 
way in those days, the graphics community became 
outraged that they were being asked to pay for 
something that had once cost nothing. A group of 
plucky programmers who hung out on the Usenet 
newsgroup comp.graphics set up a working party to 
develop a successor to GIF The plan was to make a 
format that was better, stronger, faster and free. 
Seven years down the line and the PNG format, 
pronounced ping, is all of those things. Browser 
support has been slow to catch up, but now the Mac 
version of Internet Explorer and Netscape 6 onall 


Illustration: Thomas Brodahl [w] www.surfstation.lu [w] www.xtrapop.com 
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platforms support the majority of the format's features. 
IE6 on Windows can render most of PNG’s unique 
features, although it still stumbles over some of the 
trickier transparency routines and chokes on 32-bit 
files. There are tricks you can use to get by, plus the 
support is good enough to replace your GIF images 
with PNGs right now. 

The PNG format is a hybrid containing two powerful 
image types in one protocol. On one hand theres 
support for low resolution, compressed, 256 colour 
images similar to GIFs. There's also support for higher 
resolution images, up to 64-bit ‘true colour’. At higher 
resolutions the compression algorithm used is 
lossless, meaning that images retain their original 
integrity. The JPEG format, which is popularly used for 


photographic images on the Web, uses lossy 
compression, a way of saying that it actually discards 
picture data resulting in a visible loss of quality in 
order to make the file smaller. Photographic PNG 
files are generally largerthan JPEGs — but as 
broadband connections become the norm this will be 
less of an issue. 

There's hope for the future here, though. Using 
compression filters, the PNG format can have 
incredible levels of lossless compression applied. 
Demonstration files have been made up to 600 times 
smaller without any appreciable Loss in quality. At the 
moment this is an area of continuing research, and no 
one has managed to incorporate these findings into a 
commercial image-processing package. Until then, 
JPEG may be a better choice. 

In the meantime, using the format to replace GIFs 
is both viable and desirable for a number of reasons. 
The format supports binary transparency, just like 
GIFs. This enables you to flag certain colours within 
the image palette as transparent, and it is supported 
by all the major browsers. PNG can go further, though, 
enabling you to set alpha transparency levels for 
individual colours, with a variation of up to 254 
steps. While Netscape and the Mac versions of 
Internet Explorer support alpha transparency, IE on 
Windows doesn't. 

For instances where colour integrity is paramount, 
gamma correction tailored to the display equipment 
being used is built into the format. PNG supports 
three separate methods: gamma correction via a 
stored gamma value, chromacity correction and ICC 
colour profiles. Chromacity correction alters the 
individual red, green and blue pigments in reference 
to a stored value. ICC colour profiles will be familiarto 
Photoshop users as method for adjusting to a standard 


reference source. This triple redundancy makes sure 


And the rest... 


PNG format is the most successful of a series of newer 
formats aimed at the Web. Others are currently in 
development, which may replace the current popular 
incumbents, GIF and JPEG. Although the PNG format is 
finally making some headway, it’s difficult to predict how 


successfully the others may fare. 


MNG - an offshoot of the PNG project, MNG (pronounced 
ming) adds the animation functionality missed from PNGs. 
Alongside some of PNG's low-res features, MNG also has 
support for sprite-based animation, difference compression 
and JPEG support. 


ING - developed alongside MNG, JNG takes the best of the 
JPEG and PNG formats. The format’s main purpose is to add 
transparency to JPEG compressed images. 


IPEG2000 - The JPEG2000 project seems to be in limbo, 
although it was originally intended to overhaul the format to 
create a multi-layered data type suited to modem use, 


This image by Diane Todd at [w] http://freetubes.com 
originally used the 32-bit PNG format to display multiple 
levels of alpha transparency and format-based anti-aliasing 
in some browsers. 


that PNG images look exactly as they should whatever 
the platform. 

You can start taking advantage of these features 
using the same tools you already use to produce your 
Web graphics. Photoshop and ImageReady export to 
the PNG format, and Fireworks uses an enhanced 
version as its default file format. In our tutorials over 
the page we look at the best ways to export to PNG 
from popular packages, and go over some tricks you 
can use to make sure they display in every browser. > 
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Feelings run high among some sections of the Web 
community about Unisys charging royalties on the LZW 
compression scheme embedded in the GIF format. Among 
the rants and raves, [w] www.burnallgifs.org has some useful 
information on alternative formats... 


broadband and print imaging. Similar to the high-end 
support found in PNG, compression ratios are 20 percent 
more aggressive than normal JPEGs with higher image 
quality. JPEG2000 contains multiple resolution versions of 
an image within one file. The user's browser would download 


the most appropriate layer for their configuration. 


PNG is two formats in one: an 8-bit format with better 
compression than the GIF, anda series of higer resolution 
formats that are suitable for broadband applications and 
printing. As bandwidth gets broader, PNG could replace JPEGs 
as well... 


Support among the Web browsers is patchy, but getting better. 
Opera, Netscape 6 and Internet Explorer on the Mac all support 
PNGs well. The Windows version of IE6 renders PNG better 
than previous versions, but still has a little way to go before it 
can match the full feature set. 
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Part 1: Optimising PNGs 


We take a look at the PNG compressions options 


available in Photoshop and Fireworks... 


Best settings 


Although we've given guidelines 
here, there's not one best setting 


when exporting compressed 
images. Experiment with 
different colour reduction 
algorithms and different amounts 
of dithering to see which gives 
the best result. If you have a 
batch of similar images, you can 
then try applying those settings 
tothem all. 


Parallel lines 


Like GIFs, PNGs store image 
information one horizontal line at Photoshop already has an option to save files 

as PNGs. Many of the same rules apply when 
saving 8-bit PNGs as GIF files. Images with large 
areas of solid colour and few complex transitions 
work best. You've got a maximum of 256 colours to 
work with, so simple graphics like buttons and logos 
suit the format. 


atime. If your image is made up 
of solid areas or strong 
gradations along a horizontal 
plane, compression will b far 
more successful. 


You can also individually tweak colours in your 
4 | palette by selecting the colour square in the 
index, then clicking on the Web Snap button at the 
bottom of the palette. Switch off Dithering or 
reduce the default amount. This option may add 
extra bytes to your image — especially if it's complex. 
You can also try reducing the number of colours in 
the palette. 


The optimisation process in Fireworks is similar, 

but don't be caught out by the difference 
between Fireworks PNG and the ‘real’ PNG. The 
Fireworks PNG format contains extra information 
on vector co-ordinates, fonts, layering and so on. 
Make sure you use the Export option when saving 
for the Web to ensure that this information isn't 
saved alongside. 
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In Photoshop choose Save for Web. Leave the 

Settings selection on PNG 8 128 Dithered. This 
is the default setting, but it will need some tweaking 
for the best result. If your image uses Web-safe 
colours, or you'd prefer it to snap to Web-safe 
colours, choose Web from the Colour Reduction 
Algorithm drop-down. 
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In Photoshop for Windows you can try 

squeezing the last juice out of the format using 
Web Image Guru —a plug-in that does more or less 
the same job as the Save for Web option but with 
more options. A demo of the plug-in is on the CD. 


8 | In Fireworks you can do your optimising within 
the main package (as you can in ImageReady, if 
you wish). Click on 2-Up to see your original image 
alongside the optimised image and make sure the 
Optimize panel is visible. 


If you want more control over the colours in 

your image, choose Adapative, then use the 
Web Snap slider to control the percentage of Web- 
safe colours in your palette. This method gives you 
visual control over the size and quality of your file. 
Stop moving the slider if the colour of the image 
starts to deviate too much from the original. 
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With Web Image Guru installed, go to 

Filters>Web Image Guru. Select PNG 8 from 
the menu in the top left of the filter screen. Even at 
its default setting, Web Image Guru outputs files 
that are quite a bit smaller than similarly specified 
GIF files. 


9 | Set the binary transparency within 8-bit PNGs 
by selecting any colour within the image — just 
as you do with GIF files. Choose the Add Colour to 
Transparency tool and select the colour that you 
wish to be transparent in your final image. 


Part 2: Alpha transparency 


The PNG format has more advanced transparency-handling 
capabilities than the GIF format... 


Beyond 8-bits 


In any instance where you'd 
normally use a GIF, you can use a 
PNG file. When saving more 
complex alpha transparency 
information you'll need to use a 
higher resolution variation of the 
format, though. You will also lose 
some of the compression 
advantages of the format at lower 
resolutions. The same image 
saved in PNG 8 format will be 
significantly smaller in file size 
than a version saved as PNG 24. 
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1 | The quickest way to see how alpha 
transparency works with PNG files in Fireworks 
is to select an object in a document with a 
transparent background, then add a drop shadow to 
it. Click on the object and go to the Effects panel or 
Effects section of the Property Inspector if you're 
using Fireworks MX. 


Ai Untitled-2.png @ 100% (Rectangle)* 


4 | Cover the bitmap completely by drawing a 
rectangle over it, then apply a linear fill to it. By 
default, this should be black and white. You can 
alter the orientation of the fill by clicking on the 
rectangle with the Fill tool. 


Mi Export Preview 


Options | File 


Format: | PNG 32 “ 


Internet Explorer 6 won't display 32-bit PNG 

files with progressive transparency — but there's 
a workaround for this as the Shockwave Flash player 
will. Export your file in PNG 32 format, then open it 
in Macromedia Flash. 


“Se BIU Gan ol 


Choose Shadow and Glow from the menu and 
select Drop Shadow. The Opacity slider will let 
you select how transparent the shadow will be. 
You'll notice that you can see the chequered 
background of the window through the shadow. 
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5 | With the rectangle still selected, go to the 
toolbar and click and hold the pointer tool. 
Select the Select Behind tool from the pop-up that 
appears, then Shift-click within the rectangle to 
select the bitmap that’s behind it. 


Once you've imported the PNG image into 

Flash, then add whatever background elements 
are required. Export the finished file as a Shockwave 
Flash file and the alpha transparency of the PNG 
image will be preserved within it. 


led-2. png @ 100% (Bitmap}* 


You can apply progressive alpha transparency 

to a bitmap object by using a mask. Start with 
a new document with a transparent background, 
then import a bitmap object into the document. You 
can use the example, egg.gif, from the Feature\PNG 
folder on the cover CD. 


G Go to Modify>Mask and select Group as Mask. 
The gradient from the rectangle is applied as an 
alpha filter over the bitmap. In either of the cases 
that we've described, in order to preserve alpha 
transparency in the files you will need to export 
them in PNG 32 format. 


|| Formats | Flash FTC) 


Template: [Flash Ory 


Dimensions: {Waich Movie 


Playback: [[]PausedAt Stat — F2]Display Meru 
Bu Didevice Fon 


g To make the image integrate directly with an 
HTML page, you should import the PNG into 
Flash and resize your movie so that it's the same 
size. In File>Publish Settings select Window 
Mode>Transparent Windowless. When the file is 
published, open up the HTML document that 
Flash generates, then cut and paste the <OBJECT> 
code into your own page. EEE 
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1. Kleber already had a track record working alongside The Designers Republic, designing sites and making them 
work. However, the company has now begun to work for the Sheffield-based group. The People’s Bureau for 
Consumer Information is TDR’s online merchandising outlet, selling t-shirts, posters and the like. Kleber set 

up the system working with TDR designs. The in-stock and shipment mechanisms work particularly well both 
design-wise and for consumers. 


2. The Ninjatune.net Website was home to the infamous Yoda-as-the-Queen-Mum image which did the rounds on 
email like viral marketing when Her Royal Highness passed away. This Kleber site combines marketing, information 
and community functions for the independent record company. 


3. Kosheen is currently MD Chris McGrail’s favourite Kleber site. “I think sites like this could have been built in this 
way three years ago, but for some reason sites weren't built like this three years ago,” he says. “There's something 
about that look. There's no technology there that wasn't there three years ago, but yet it looks really mature compared 
to what we were looking at three years ago. | kind of like that.” 


4. The Warp Records site is one of the bridges between The Designers Republic and Kleber — both companies do 
design work for Warp. Doing record company sites for independent labels has given Kleber the opportunity to find 
higher profile jobs, and has led to a contract to redesign the MTV2 site later this year. 


5. Fatboy Slim and the Manic Street Preachers are just two examples of major British music sites that Kleber has 
designed. The company is looking to diversify into brands and services beyond the music spectrum, however. 
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Kleber 


“When you're working with the brand of an artist, you 
stay true to it,” says Chris McGrail, MD of a company that 
designs sites for some of the best bands in the UK... 


et back to basics. It’s a phrase that gets 
ripped off by right-wing politicians like John 
Major and George Dubble-ya Bush all the 
time. But for Web design outfit, Kleber, the 
process of getting back to basics is a far more 
sophisticated pursuit than blabber-mouth politicians 
would suggest, and it has nothing at all to do with 
tougher policing or old-style community values. 
Kleber is driving itself towards a modern-but-classic 
style of Web design — something that will work online 
today, and look great tomorrow, the next day and the 
day after. Something that probably should have been 
around yesterday too. 

“Certainly over the last couple of years with the 
work that we're doing, we've been aiming for some kind 
of classic era Web design rather than relying too 
heavily on trends or fads,” explains Chris McGrail, 
Managing Director. “With the maturity of the medium 
that there is now, it’s really nice to strip all the guff 
back and get down to working out what we're trying to 
communicate, and how best to do it without getting 
caught up in technologies.” 

It's not that this six-year-old company won't use 
applications like Macromedia's Flash. In fact, 

Kleber’s recent work for The Designers Republic's 
e-commerce site, The People’s Bureau for Consumer 
Information, uses Flash a-plenty. However, the general 
ethos when it comes to technologies like Flash, or 
even HTML-generating layout tools, is never to use 
them for their own sake. Kleber does it all by hand, 
wherever it can. The company also does its own Web 
hosting, and writes bespoke serverside code to fit 

its projects. 

“We've gone through huge fads of entertainment 
via Flash work online. | think now we're kind of 
simplifying things and getting back to some 


information. People don't want to just sit through floaty 
menus and intros,” adds McGrail. 

That doesn't mean the company doesn't get some of 
the trendiest clients out there, with a heavy bias 
towards the music industry. The Designers Republic is 
joined on the Kleber client list by an array of record 
labels and bands, including Ninja Tune, Warp Records, 
Higher Ground (Sony Music), Kosheen, Fatboy Slim 
and Leftfield. Of Kleber’s recent sites, Kosheen’s is one 
of Chris McGrail’s favourites: “It’s the most complete 
and closest testament of what a site should be like, 
which is pretty classic, in that it’s HTML. There's very 
little Flash.” 

So far, the company’s strategy has been to create 
sites for smaller record labels that are bringing in fresh 
talent and leading edge sounds. This has led to 
recognition by bigger labels, who watch youth trends 
and pick up and/or imitate the independents. When 
the big labels pounce ona sound, they'll often take 
note of the sleeve designers, video directors and Web 
designers. Hence work for Warp and Ninja Tune has 
turned into jobs for Sony Music as well. 

However, the future for Kleber is to diversify and 
move beyond the music industry, but still to ride the 
influence that work in the music industry can have in 
other areas of modern culture. “Compared to a year 
ago, we're so lucky to be around, really,” admits 
McGrail. “We didn't get so silly before the dotcom 
crash as to be paying coders £40,000 a year. We've 
survived that and we're quite pleased about that. So it’s 
sustain on one level, but also we are looking to move 
into DVD production and some CD-ROM production 
as well.” Back to basics, you could say. FEES 
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Creating components 
with Flash MX 


We show you how to create a component and 
a custom user interface in Flash MX to enable 
the building of better Websites... 


omponents are one of the 
more valuable and powerful 
capabilities in Flash, aiding 
Website design. While the 
example components that come with 
Flash MX may make you think that 
components are more like programmatic 
macros. Components are almost mini- 
apps. The component we'll be looking at 
is designed to take a movie clip that 
contains graphics on each frame and 


array them out in virtual space like a 
virtual art gallery. The code that 
accomplishes this is complex and we 
don't have room to cover it line by line. 
All code featured may be difficult to 
read, so it is also on the CD (code.txt) in 
the Tutorial\Components folder. You will 
also find some free components on the 
CD from Eyeland.com worth $105. 
Before we look at how to make a 
component, let’s see how components 


are used. There are several facets to 
creating components. We will walk you 
through the steps to create the 
component after we have been oriented 
on what it does and how it can be used. 
The component we will be making is a 
3D gallery in which you can navigate 
with either the arrow keys or the mouse. 
The gallery component could be used to 
showcase art, pictures, products or 
make a menu. > 
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Part 1: How to use components 


Become familiar with the basics of using components and take a look at the component featured here... 


Online components 


You can find free components 
online at many sites like 
Macromedia's Flash Exchanges 
([w] www.macromedia.com) or at 
sites flashcomponent.com. 
Components are also available 


for sale at sites like eyeland.com. 
FF ingest ior runtime shacing 
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¥] From the Tutorial\Components folder on the 
CD, move Gallery.fla, Gallery_UI.swf and 
Gallery_UI.fla to the same directory. Save Gallery.fla 
to you hard drive. Open the Library and select the 
Sample Art movie clip. Open the Linkage Properties 
dialog, set the Linkage to Export for ActionScript 
and enter art as the name for the Identifier. 


Drag an instance of the Gallery 3D component 
onto the stage on the SmartClip layer. Centre 
the Gallery 3D component instance on the stage. 
This is a pre-created version of the component that 
you can use for reference. You can edit the 
component and delete it. Where you position the 
component is important. The point you place the 
movie clip at can be thought of as the centre of the 
gallery. If you were to move backwards so that the 
gallery items travelled off into the distance, they 
would eventually reach a vanishing point. That 
point is where you should place the component. 


GALLERY PARAMETERS. 


Let's look at the customisable parameters for 
this component. Click on the instance of the 
Gallery 3D component on the stage. Open the 
Properties panel and click on the Launch 
Component Parameters Panel button. This will open 
the Component Parameters panel and it will load 
the Graphics_UI.swf as the custom user interface. 
Enter “art” in the Graphics Linkage ID field. This 
tells the parameter to use the Sample Art movie clip 
to generate the gallery effect. Close the 
Components Parameters panel and test the movie. 


Part 2: Creating components from scratch 


Standard movie clips are transformed into components with the Component Definitions dialog box... 


ae The creation of a component starts off similarly 
to a basic movie clip. You simply start by 
creating a standard movie clip and insert any desired 
component graphics and code. This particular 
component requires that the user supplies a 
separate movie clip for the graphics, so the only 
graphics in this example you will not draw anything 
in the component movie clip. The white [Gallery] 
text in the 3D Gallery component is there only to 
make it easier for you to see. Edit the Gallery 3D 
component observe that it is just like any other 
movie clip. You can delete the Graphics layer to get 
rid of it and the component will work perfectly fine. 
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4 | Click on the Set button next to the Custom UI 
field. The Custom UI field is where you define 
what SWF file will replace the default Flash 
component box. You select the SWF file to be used 
as the custom UI by browsing to it and selecting it 
from your local drive. It is a good idea to place the 
SWF for the custom UI in the same directory as 
Flash file you're working on. The custom UI file is 
usually made after you have properly defined a 
component. We will talk about creating a custom UI 
later. Close the Component Definition dialog box. 
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Open the library, right-click on the movie clip, 
select Linkage, and notice that the Component 
also has an Identifier. The Identifier that is set in the 
Linkage dialog box is necessary to associate the 
component with that which is contained in the 
component. We look at how this Identifier is 
referenced in the code later. All components require 
an Identifer. Close the Linkage dialog box. 
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2 
2 #initclip 


constructor for the 
Gallery = function () 
( 


array that holds the x- and 


this.item position = 


E-position of the gal 


new Array (this.num_items): 


Line 1 of 177, Coll 


Let's add some functionality to a component. 
Fundamentally you add ActionScript to a 
component much as you would add ActionScript to 
any other movie clip in Flash. The key difference is 
that we must tie together the component with the 
Component Definitions and the custom UI. Edit the 
Gallery 3D instance on the stage, select frame 1 on 

the Actions layer, and open the Actions panel. 


Select Component Definition from the Library 

Options menu. Movie clips become 
components when they are defined as one with the 
Component Definition dialog box. This is where you 
enter the editable parameters. Enter a Name, 
Variable, Value, and Type for each parameter. The 
most important field is the variable name which 
must match the variable that it will be tied to in the 
code. The name field can contain anything that 
describes what the variable is for and the value is 
the default value that will be displayed when a new 
instance of the component is dragged on the stage. 
Note that one of the data types is a list. List values 
can be added with the Values dialog. 


G To use components to the best of their abilities, 
the code for it is usually written as a class. A 
class is like a blueprint from which instances are 
created. Classes contain properties that are 
associated with the class and methods that are 
attached to the class. In addition to properties and 
methods, all classes have a constructor. It is the 
constructor that creates instances of the class. For 
example, the Array class is a blueprint for creating 
arrays in Flash MX. It has a property of length, and 
methods to sort the array, insert new elements, as 
well as remove elements. The constructor for the 
Array class is the Array () function. To create an 
instance of the class you use the keyword new: 
my_array = new Array (); 


The Gallery class for the gallery component is 

defined with the line Gallery = function (). The 
Gallery class has all the properties that are defined in 
the Component Definition box, as well as a few 
others, It also has methods to capture key presses or 
mouse movements for navigation, and it will 
translate and render the gallery items. 


Look at the code for this step from the CD. We 

need to make the component act like a movie 
clip, even though it is an instance that is set to 
inheritance. Inheritance is a way of deriving classes 
from a previously defined class. If class B were to 
inherit from class A, B would have all the same 
methods and properties as A in addition to its own — 
for example, if the class Male and Female derived 
from the class Human. 


B// conmecucsor for the gaiiery object 
Gallery = function 0 
c 
sceny that holds the x and s-poas 
this-tten_position = pew array |ense-2um 


this-mouse_down = false: 


Look at the code on the CD for this step. 
Taking the last few steps into account, this 
code establishes the class for the gallery component. 

First we have the constructor for the component 
class, then we derive the class from MovieClip, 
before associating the class with the gallery movie 
clip. In addition to the properties that the user can 
change in the Component Parameters box, the 
constructor initialises a few other variables. 


WO) // asscoiste the Gallery ciaas vith the couponen: 
[73 cagect.cagisverCiess ("gallerys") 


The code for this step is in the code.txt file in 

the Tutorial\Components folder on the CD. 
One of the advantages of Flash MX’s components 
over version 5's smart clips is the integration of 
classes and components. When you drag an 
instance of a component onto the stage, you are 
creating an instance of the class — the movie clip has 
all the properties and methods of the MovieClip 
class as well as the component class. All high quality 
components use this. It provides a way to organise 
and encapsulate components, making them easier 
to use. There are two steps to set this up. 


£Y prototype: initialize * fonction {/ 


11 | Inheritance is used in components to inherit 
from the MovieClip class. Since all instances of 
the component are treated like instances of the 
component class, if the class did not inherit from 
MovieClip and only used registerClass, you would 
completely nullify all properties and methods that 
the movie clip should have. So, to get the 
component class to inherit from the movie clip class 
we use this code: 

Gallery.prototype = new MovieClip (); 


imheric from che MovieClip cimee 


Gallery. prototype * new Hoviecisp |) 


initializes the gailecy By strech che items 
Gallery, prototype: initialize = tusetion () 


o Anctement slong the x-aie the treme ace 


¢_item ~ thie. left item) / hie num items 


fSarncas 


This code defines the class, inherits from 

MovieClip and associates the class with the 
component. Note that the Object.registerClass call 
comes after the inheritance code. You should also 
notice in this piece of code the call to the Initialize 
method. This method will be implemented and 
discussed later, but it is this that attaches the 
instances of the movie clip that are created by the 
user. The only thing left to do now is to implement 
all the methods. 


Set the size of the item based on it 
this( "item" + 3) -_xscale ~ 


cet the depth based on the item'= z-position 
this("ivem” + 3] .svapDepthe (~this- item position{ 3] 


Object.registerClass has two arguments. The 
first argument is where we put the identifier that we 
looked at in step 5. The second argument contains 
the name of the class (Gallery). This associates the 
Gallery class with the component movie clip. 


thie transiat 
whis-transiae 


tnie-mouse ol 


Notice the first and last line in the script. There 
is one problem with writing the class inside the 
component that needs to be dealt with. A class for a 
component only needs to be defined once, but 
every time an instance is dragged onto the stage the 
class will be redefined. Flash MX provides a way to 
skip the definition if it has already been defined 
once with the use of #initclip and #endinitclip. You 
would use the actions like this: 
#initclip 
// class definition goes here, and executed 
only once 
#endinitclip 


een carreras 
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se ext_aten) 


this-ttem_position(3].£ ~ avh.candom {) * thie depths 


The code here is the first part of the Initialize 
15 method implementation that will attach the 
gallery items to the component movie clip and 
initialise their positions. Each item is spaced evenly 
along the x-axis with the first item at left_item 
and the last item at right_item. Then each item is 
given a random z-position which is between zero 
and depth. 
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this-onfouseflove = undefined; 
this.onBousedown + underined: 
this.onlouseOp = undefined: 


The last part of the Initialize method (seen in 

the relevant code) is a conditional statement 
that relates to the user's decision on how to 
navigate the gallery. The methods onMouseMove, 
onMouseDown and onMouseUp will be 
implemented shortly, but they all relate to changing 
the values of the translation variables that affect 
how the gallery moves. If the user has chosen to use 
keys to navigate the gallery then these methods 
should not be called, so they are set to undefined. 


. 


ee Fame ce Rare as 


leta the rest of the script know when che mouse 12 no longer being held dow 
Jat lery.provovype-ontousep = function () 


Gellecy. prototype. 


check if the user wants to control the gallery with the keys 
4f (this.gallery_concrol == *Key Navigation” 


Look at the code for this step from the 

code.txt file on the CD. When you release the 
mouse the Boolean is set to false, and the 
translation variables are reset to zero since the 
gallery should not be in motion. This code acts to 
stop everything when the mouse is released. 


: ail 
* Ehis.epeed * (Key. iaBown (Kay.DOWM) ~ Key.daDoun (Key. UP 


chee by the variebies Sai “4 


The final event added to the class is 

onEnterFrame. This method takes care of quite 
a bit. Its first objective is to capture key presses for 
users that want control of the gallery through the 
arrow keys. Since the isDown method of the Key 
object returns a true or false (1 or 0 numerically) we 
use the return values to change the value of the 
translation variables in this step's code. 


House Position Navigation") 


The idea that an instance of the component is 

treated like an instance of the component class 
is very useful. Since instances of the component 
have all the methods and properties of the 
component class, you can define events like 
onEnterFrame and onMouseDown in the class and 
they will become the events of the component 
movie clip. If you define the method onEnterFrame 
in your class, those actions will be executed every 
time your component is on the stage. 


The next event seen in this piece of code is 

what changes the translation variables 
depending on the position of the mouse. There is a 
conditional statement that controls the flow to 
where the translation values are calculated because 
there are two different ways to navigate with the 
mouse. The first part (everything under “if”) is for 
when the navigation is based off the mouse position 
relative to the centre. 


When the key presses have been checked the 
final stage in the component's code is to 
render the items. We have an item in 3D, but only a 

2D screen to view it on. We must, therefore, 
transform a 3D point to a 2D point in order to 
render the item on the stage. This piece of code 
handles the necessary calculations. 


18 | The first event we define here is for capturing 
when the mouse is pressed with 
onMouseDown. When the user clicks the mouse we 
need a few pieces of information. Firstly, we must 
reset the mouse_down Boolean value to let the rest 
of the code know that the mouse is down. We also 
need to know exactly where the user clicked their 
mouse. Depending on how the user wants to 
navigate the gallery, the translation values may be 
determined by how far the mouse is from where 
they clicked. 


lg] 
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thiw naviagicion 
(tbt9.mouse_down) 


elowlate the transiation variables according to th 


fram the mouse position to viere the mouse was last clicks 
thS.transletion x = ~(_foot,_xmouse - this.mouse clicked_x) / this. 
this.transiation : = (root, ymouse - this.mouse clicked y) / this. 


The “else” portion of this code of the 

conditional handles the translation values 
when the movement is dependent on the distance 
between the mouse and the where the user clicked. 
For instance, if you click and then drag, this code 
controls the navigation according to how far and 
which direction you drag to after you click. 


vat t 2 based teem! 2p 
thia("item" + 5) ,avepDepthe (this, item ; 


Remember that only the x-position of the item 

needs to be evaluated, because we are not 
enabling the user to move up and down along the 
y-axis. The next step to rendering, after positioning, 
is to scale the item and make sure that items closer 
to the viewer overlap items in the background. The 
variable perspective_ratio helps with scaling the 
movie clip, and the z-position of the item helps with 
z-sorting the items. 


Part 3: Creating a custom UI for your component 


A custom UI provides a more user-friendly environment for editing your component's parameters... 


Games 


You can use components to make 
any number of Flash applications 
including games, interface 
elements, and much more. See 
the samples from eyeland.com 
that are on the cover CD, 
including a sliding puzzle game 
component and an elastic menu 
component. The custom UI forthe 
Elastic menu contains multiple 
tabs and sliders to set the values 
for some of the parameters. 


Easier access 


Opening a custom UI via 
Panels>Component Parameters 
can be alittle intimidating for 
Flash newbies. You can make the 
custom UI more easy to access 
by setting it to open in the 
Properties Inspector. To do this, 
select the Component in the 
Library, open the Component 
Definitions dialog and click on 
the Set button next to Custom UI. 
Click on the Display in Property 
Inspector option instead of the 
Display in Component Parameter 
Panel option. 


Close the Actions panel and exit out of the 

Gallery 3D component and save the Gallery 
file to your local hard drive. Now let's look at how to 
create a custom UI. A custom UI that will be used to 
do customisations. There are many advantages to 
creating your own UI rather than resorting to the 
default. You can provide text that explains what 
each parameter means, and you can check what the 
user entered to make sure they did not enter 
something erroneously. 
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4 | If you chose to make a custom UI for your 
component, it is no longer necessary to add 
parameters to the Component Definition box. In 
fact, just to make sure that there are no conflicts 
with the settings in your UI and Flash’s default UI, 
you should not define any parameters for the 
component in the Gallery.UI file. Also, if you ever 
wish to flush out all the variables in a component 
you must delete the instance and drag a new one 
onto the stage. This sometimes needs to be done 
when you add a parameter after an instance is 
already on the stage. 


cl 
Edit the Exchange movie clip. Click on the 
ComboBox movie clip (with the text Key 
Navigation in it) next to the Gallery Navigation 
label. Open the Properties dialog box and click on 
the Properties and Parameters tabs. When the user 
selects how they want to navigate the menu, they 
can only choose Key Navigation, Mouse Click-Drag 
Navigation or Mouse Position Navigation. You can 
also use components within components. In this 
case, we simply need to use the Combo Box 
component that is provided by Macromedia. By 
dragging an instance into the xch movie clip, we can 
give it the instance name gallery_navigation, and 
edit its parameters. 


Open the Gallery_UI.fla file from the CD. 

Open the Library. Custom UI is just an SWF 
that replaces the default Component Parameters 
box when the user right-clicks on the component. 
Therefore, you must create a new Flash movie. The 
stage size can be any dimensions you want when 
the user right-clicks the component. A separate 
window will pop up for them to enter the 
information into and to customise it 


tit 


GALLERY PARAMETERS 


Return to Scene 1. Select the Exchange movie 
clip on the stage and open the Properties 
panel. The most important aspect of the custom UI! 

is sending data from the interface SWF to the FLA 
that holds the component. The component must 
know the values of the parameters that the user 
entered for it to function properly. Flash handles this 
with a special movie clip in the UI. The instance 
name of this movie clip instance must be called xch. 
When a person using your component closes the 
custom UI, Flash takes all the variables in xch and 
places them in the instance of the component. 


GALLERY PARAMETERS. 


thas. gallery contro! + this.gallecy_navigation.getValue () 


Return to scene 1. Select the Exchange 

instance and open the Actions panel. Since the 
choice of how the user is going to navigate the 
gallery is encapsulated in the ComboBox 
component, we need some way of getting that 
value to the xch movie clip. This is done with the 
getValue method of the ComboBox class. The 
getValue method is used in a clip event on the xch 
movie clip. Every frame takes the value in the 
combo box and puts it in xch for the component 
to use. 


GALLERY PARAMETERS: 


3 Edit the Exchange movie clip in the Library. 
Select the text field next to Number of Items. 
The most obvious step of the UI is to actually make 
the interface that the user is going to work with. For 
this component, the interface consists of a column 
of text fields (on the right) that the user enters the 
values into, and a column of text (on the left) that 
explains what each field represents. The variable 
names for the text fields are the exact same as the 
names that appeared in the original Parameter 
Definition box. 


G Close the Properties panel. Once you have 
the xch movie clip in place you must 
continuously take the information in the text fields 
of the interface, and put it in the movie clip so that 
the component gets the information. You need to 
make sure that all the variables that the user can 
change are passed to the xch movie clip by the time 
the UI is closed. The easiest way to do this is to 
simply put all the text fields the user can edit in the 
xch movie clip itself. This will guarantee that no 
matter when the user closes the UI, the variables will 
be in there. 


auto 4 


a The component is now fully functional. You 
can drag as many instances as you want to on 
the stage, and customise each one through the 
Component Parameters box. An interesting effect is 
to separate your graphics into a few movie clips and 
use a gallery component for each set of images. If 
each component was positioned in a different spot 
you could create some very weird perspectives on 
the showcase. Or, you could replace images in the 
movie clip that you made with buttons and you 
have a 3D menu to navigate through. 
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Better site design 
with GoLive 6 


With its Website creation capabilities and a 
friendly Adobe interface, GoLive 6 is a 
respected choice for creating great looking, 


professional Websites. .. 


nthe past, Adobe GoLive 
has been unfairly maligned 
as a crash-prone poor 
relation to Macromedia's 
high-end Website creation tool, 
Dreamweaver. But Adobe's latest version 
of GoLive could see potential converts 
flocking from the Macromedia camp on 
its feature list alone: you'll find 
everything from improved table handling 
and support for ASP PHP and JSP to 
Smart and lean rollovers and the 
bundled Web Workgroup Server. 

If you consider that GoLive is fully OS 
X and XP native and benefits froma 
familiar Adobe interface, you'll realise 
that it could make serious in-roads into 
Dreamweaver's market share. 


GoLive has been built with the 
designer in mind, and putting a site 
together is simplicity itself. From initial 
plans through to the final build, GoLive 
has all the tools you'll need to create 
professional looking Websites that are 
completely standard compliant. 

Best of all, GoLive works flawlessly 
with other Adobe products, such as 
Photoshop, Illustrator, ImageReady and 
LiveMotion, enabling you to build a 
creative workflow that suits the way 
you work. 

Over the next few pages we'll step 
through the process of constructing a 
simple Website, using some of the 
time-saving design features that 
GoLive offers. 


Part 1: Designing your Website 


Using a combination of GoLive and an image editing application, such as Photoshop, 
you have all the tools you need to start creating Websites... 


Lights. Camera. 
Action! 


GoLive's capabilities can be 
extended in a number of ways, 
but the easiest is to use Actions, 
which are snippets of JavaScript 
code and are the equivalent to 
Dreamweaver's Behaviours. 
There are hundreds of 
commercial and freeware 
Actions, and the best place to 
start looking is Adobe's Xchange 
Website at [w] http://xchange. 
studio.adobe.com/, 


On the CD 


To give you a taster of GoLive 6's 
capabilities, we have a demo 
version of the package on the 
cover CD, Also on the CD is the 


original site design. Load the file, 


golive_tutorial_site.psd, where 
you'll find the resources for the 
tutorial. See step 5. 


ey 


@ By default, GoLive steps you through the initial 
process of naming and creating your site when 
you click the New Site button on the site creation 
wizard which appears when GoLive first boots. 
GoLive builds a special folder containing the site 
itself, the settings used and GoLive data such as 
templates and SmartObjects. 
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4 | Best of all, you can convert the Design 
Diagram into an actual Website. Once you are 
happy with the layout, you can Submit the design 
(Diagram>Staging>Submit All) which creates 
editable HTML pages from the relevant icons in the 
Design Diagram. 


The main window in GoLive is the .site 

folder, which is a visual representation of the 
files needed to build a Website. Along the top is 
the contextual toolbar, the contents of which 
change depending on what has been selected. All 
the floating palettes can be stowed away by 
snapping them to the edges of the monitor leaving 
only the tabs. 
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Having created the bare bones of the Website, 
the next step is to design the site's look and 
feel. A useful trick is to use a Photoshop template 
which contains the browser chrome so you can be 
sure what your site will look like to the average user. 


Double-click on the Index page in the .site 

window to open it. With the Tracing Image 
palette opened (Window>Tracing Image) select an 
image file to use for your design (check the source 
box and use the folder icon to navigate to your file). 
The image will appear ghosted. You have control 
over the offset and degree of transparency. 


You can use the tools in the Tracing Image 

palette to make selections from the ghosted 
template and promote those to actual graphics you 
can use in your Website. 


It's good practice to create a flow chart or 

tree diagram of the Website you intend to 
build. This might be for client approval or to keep 
things clear in your head, but in either case 
GoLive provides you with all the tools you need. 
You can drag icons from the Diagram tab in the 
Objects palette for HTML pages, PDFs and more 
onto a special Design Diagram page and create 
hyperlinks between all the items by going to 
Diagram>New Design Diagram. 


There are no hard and fast rules when it comes 

to Web design, but clear and simple navigation 
will be appreciated by your audience. When you are 
happy with your site’s appearance, crop away the 
browser chrome for the next step by using the 
Photoshop dummy as a tracing image in GoLive. 


When a selection is promoted GoLive invokes 

the Save For Web feature, which will be 
familiar to anyone who has used Photoshop to 
create Web graphics. You can experiment to find 
the best optimisation settings before saving as a GIF, 
JPEG or PNG file. The resulting images are saved 
into floating layers in GoLive which can be moved 
around the page if necessary. > 
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Part 2: Building your pages 


By making use of GoLive's features such as Rollover Detection, cascading style sheets 
and Components, you can build pages quickly and easily... 


Striptease 


When GoLive builds a Website, it 


includes proprietary code and 
tags which enable the 
application to correctly edit the 
page, but there's no reason why 
this code has to end up on your 
remote server. Luckily, GoLive 
provides an option to strip out 
unnecessary code which can be 
found at Site>Settings> 
Export>Strip HTML code for 
Adobe GoLive elements 
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An alternative to using the Tracing Image 
feature is to use Photoshop or ImageReady to 

slice the mock-up. You can choose whether to 

export to floating layers or tables depending on 

the degree of compatibility you want with 

older browsers. 


It's probably a good idea to check your 

progress in a browser at this point. Although 
GoLive has a useful preview facility, it's no substitute 
for making sure things are working as you expect in 
the major browsers. Internet Explorer has the largest 
share of the market, but don't alienate potential 
visitors to your site by not checking in Netscape and 
Opera if either are installed on your machine. 


Components must be saved in the 

Components Site folder. From here you can 
drag them onto the page from the Site Extras tab of 
the Objects palette. You can edit the component 
simply by double-clicking on it. For sites with 
repeating items on each page, it's a real time-saver. 
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If you have saved an HTML file to your .site 

folder with your optimised images from 
Photoshop or ImageReady, you can copy and paste 
the elements into your existing Web page within 
GoLive. The app should keep track of the links to 
the image files using its own internal database. 


Having made sure the rollovers are working 
correctly, it's now time to add hyperlinks using 
the Point and Shoot tool. Simply drag a line from 
the coiled link icon in the Link tab of the Inspector 
palette to the destination you'd like to reference. 
This could be a file or anchor listed under the Files 
tab or a URL or email address listed under the 
External tab in the .site window 


8 | Now add some words: drag a Floating Box 
icon onto your page from the Basic tab in the 
Objects palette and fill the contents with your text. 
Use CSS (cascading style sheets) to style your text 
by opening the CSS Editor (View>CSS Editor). 
Create a new class style by clicking the button with 


a dot in middle at the bottom of the editor window. 


A class is a flexible style that can be applied to 
elements on your Web page. 


GoLive is clever enough to create rollovers 

without any intervention if they are named 
appropriately using recognised naming conventions. 
GoLive generates the JavaScript and makes the 
rollover states active. The rollover detection naming 
for Normal, Over and Down can be user defined, 
which comes in handy if you have a tendency to 
save files with obscure names. Simply drag a normal 
state graphic onto your page from the .site folder 
and GoLive will do the rest. 
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G Components are repeating items, such as 
menu bars, which can be placed on any page 
in GoLive. If the original file is modified, the changes 
are reflected in all the pages that use the 
component. Creating components is as easy as 
selecting use Page as Component in the HTML tag 
of the Inspector palette. 


9 | Give your class a name, ensuring that the 
name has no spaces and the full stop at the 
beginning is not deleted. Using the Inspector palette 
you can decide which variables you'd like to apply, 
such as typeface, colour, size and weight. The style 
can then be applied to the text using the CSS palette 
(Window>CSS). Use Span to apply an inline style, 
Par to apply your style to a paragraph, or Div to 
style the whole floating box. 


Part 3: Putting it all together 


Using Templates and Smart Objects you can produce a number of pages based on a 
single design. The last step is to upload it using GoLive's powerful FTP facility... 


Finished site 


You can view the finished site for 
this tutorial at [w] www. 
pixelsurgeon.com/ca_tutorial. 


Templates are a powerful feature in GoLive. 

They enable you to create a page to be used as 
the basis for other pages, enabling you to decide 
which parts of the design are editable and which 
stay locked by using the Template Regions palette 
(Window>Template Regions). Different inline and 
block areas can be defined as being editable by 
clicking the New Editable Region icon at the bottom 
of the palette. 
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4 | A Smart Object can simply be a Photoshop file 
with live text which is treated as a variable by 
GoLive. With the Photoshop Smart Object 
placeholder in position select an appropriate 
Photoshop file to become the Smart Object. 


‘Computer Arts Tutorsat site Setting: 


Having finished the site it's time to upload it. 

Before you can do that, however, you have to 
specify your FTP settings in GoLive (Site>Settings> 
FTP and WebDAV Server). The details you need are 
straightforward and if you don't know them, your 
ISP or Host should be able to tell you. 


Once you have decided on which regions are 
editable and saved the resulting file to the 
Templates Site folder, Templates are accessible via 
the Site Extras tab of the Objects palette. Simply 
drag the thumbnail onto a blank or existing page. 
The editable regions are clearly shown by default. 


a 

5 | GoLive presents you with a list of all the 
variables in the Photoshop file. Select a text 

variable, and in the value box type the new copy 

which will replace the existing text. GoLive creates a 

new image file based on the variables, leaving the 

original Photoshop file untouched. 


SAREE 


8 | Connect to your server using the 
Connect/Disconnect icon in the toolbar and 
click the Incremental Upload button. If you've never 
uploaded anything to your server before, GoLive 
will prompt you to select which files you'd like to 
transfer. If you continue to use GoLive's FTP facility, 
the application will keep track of which files have 
been uploaded and will subsequently only offer to 
transfer new or modified files. 


On your new page, change the text and 

replace the image with one of exactly the same 
dimensions. Also, drop a Photoshop Smart Object 
from the Smart tab in the Objects palette into the 
headline floating layer. 


6 | GoLive uses the familiar Save For Web feature 
to render the Smart Object, which appears on 
the layout page as a normal graphic. As well as 
rendered text headlines, Smart Objects are useful 
for buttons and other repeating visual elements. 


GoLive's FTP facility is speedy and fully 

featured, so there's no reason to use another 
FTP application. Once your site has finished 
uploading, check the live URL to make sure 
everything is working as expected. Then sit down 
and congratulate yourself on creating a better 
Website in less time than it would usually take. EEE 


Web Design | 75 


(Ae 
We = 
ii EN 


DATAE 


Ts Ff 
exoot FONTS Ai aang 


+ A FREE Cp 


R SPECIAL OFFER 
‘Suesfree.com 


SZ 


CHECK OuT oy 
AT www.5is 


a 
z eo 
‘ a 
; . ‘ 
= q 


SSUE21 ISSUE 22 
0870 444 8457 THE OFFLINE ISSUE THE BROWSER ISSUE 


a vaca, wars rate YoL a wae 
\ {7 10 REASONS TO UPGRADE NOW 


ISSUE 23 ISSUE 24 
THE IDTV ISSUE THE FLASH ISSUE 


r 
* 
isl ret 
ig} _ 
ISSUE 25 ISSUE 26 
THE GAMES ISSUE THE USABILITY ISSUE 


THE TYPOGRAPHY ISSUE 


Designers are often accused of not having enough awareness of 
typography. Is this view justified? Which sites are pioneering good use 
of type online? And what are the dos and don'ts of good typography 
on the Web? It's all in the next issue of Cre@teOnline. 


INSPIRE ME! 
10 top designers tell us how they alleviate designers block and where their ideas 
come from 


JON BARNBROOK 


FREE INTERACTIVE CD 


SPECIAL TYPOGRAPHY ISSUE oe 


LIVE VIDEO INTERVIEWS: 
T26 / Pixelsurgeon / Identikal 


THE SECRET TO GOOD TYPOGRAPHY ON THE WEB 


Font designer and all-round typography guru, talks about how serial killers 


inspire him and why he told Coca Cola to do one. 


WIRELESS: IT’S NOT OVER YET 
Why the new Pogo is breathing life into the wireless design market. 


PLUS: 
Behind the scenes of new sites: Big Brother 3, MTV 2 


ON SALE: WEDNESDAY 12th JUNE 


PLUS: 
How Identikal produced ‘Seize’ 


Jason Arber's top tips 
for better font design 
How 126 created its font ‘Elephant’ 


FREE SOFTWARE: 
F apher - design your own Fonts 


ACHNIANCIANC 


eit 
Et 
Tie} 5 WE 
4 i] ts € . , : : 
Take your Web skills to the next 2 : } | 
level with our 100-page guide = a 


13 issues for the price of 9 


computer 


~/ YES! | want to subscribeto F:la¥>) x4) 


This is your chance to subscribe to Computer Arts Special for just ; 
Cut out or photocopy and return this coupon 


£54. You'll get every issue delivered to your address, and more 
importantly, you'll save £24 on the deal. Phone our hotline today! i (yaaa PO eee Seah Se ee eR a ee ee 


Fit [OP msean ESOS DOOY otc NUE ea PnP os Be pO SED ema ene Een oe tee ee eas Uc pw CRT SPe ll feeczen? lute cw vo tnucO EDN, 


Computer Arts Specials are certainly hot property — 
Postcode/Zip_________——Country. 


you'll find all the best techniques and tools for a variety 


of computer art disciplines: Daytime telephone number 


Email address 
13 Special issues 
- Photoshop - 3D graphics - Flash - UK (cheque/credit card) [] £54 save £24 


- Dreamweaver - Digital video - Hesmuert panacea pene 
Rest of the world |] £86.53 “AIRMAIL 


. : i . Please choose your method of payment |, 2 or 3 
Each issue comes complete with a dual-format CD. , Ls Me 


1 (J Cheque (payable to Future Publishing Ltd. Sterling cheques drawn on a UK account.) 


Simply call our hotline, email us, or fill in the form on the right. 2 (Visa or (MasterCard 


(A photocopy will do) 
3 CJ Switch ee ho Si aaa a eT Hee er ET SIY ee ena AONE MeN AEDT AN 


(yo, CP enAS Sees aU apn aa Rename rss Otontentecrortiemeeomertonercerswog 1's © UE ee 


7 Make even greater savings 
| . . 
7 b y S u b S C rib in g to UK readers return this coupon (no stamp needed) to: Computer Arts Magazine, Subscriptions, 
a Future Publishing Ltd, FREEPOST 8S4900, Somerton, Somerset, TAI] 6BR. 
Computer Arts too! 
; , Overseas readers return (postage payable) to: Computer Arts Magazine, Subscriptions, 
Turn to page 34 for details. Future Publishing Ltd, Cary Court, Somerton, Somerset, UK TAI! 6TB. 


{] Please tick this box if you would prefer not to receive information on other offers. 


Order code: |COSP33} Offer ends 05.07.02 


call the hotline: +44 (0)870 444 8495 wwe" 


COSP3 


Signature. Date____ 


Web Design | 77 


t rigs b RB Site 


JaUpINASG@suyo [2] eu pNspmMmm [M] MAH SewWeP sUYD ‘uOWeASM}] 


78 | Web Design 


Set up your own 
local Web server 


Producing better Websites that work faster and more 
efficiently can be achieved by setting up a local Web server... 


s authoring software like Macromedia 
Dreamweaver and Adobe GoLive become 
more sophisticated, the line between the 
roles of the developer and the designer is 
becoming more blurred. Your Websites become more 
sophisticated; they're no longer a collection of static 
pages, they're now Web applications that pull content 
from databases that use CGI, PHP or ASPnet protocols 
to initiate server side calls. When you build static 
pages you can easily look at how they’tL work in any 
Web browser directly from your hard drive. When your 
sites are dynamic, though, the only way to see them 
working is ona Web server. Installing a server locally 
gives you your own staging area to test your site to 
breaking point before it goes online. 

If you don't take care of this side of things yourself, 
chances are that you're part of a team that does. Some 
develop content, others program databases, create 
layouts and navigation, and your graphic design skills 
are required by every member of the team. Every 
member of your team needs access to your site. The 
solution? Again, putting the site on a local Web server 
with secure access for every team member speeds up 
the process of building complex sites. Things can be 
changed, updated and tested in moments. 

These are the key reasons for wanting to set a local 
server on your own machine or on the office network. 
So, you can test sites as you build them and to share 


files with your team. As you delve more deeply into the 
world of Web servers, you'll be surprised at how many 
additional benefits there are. You'll gain hours of 
productivity as you'll no longer be at the mercy of your 
Web host and Net connection — your site will be there 
for you to test and tweak whenever you need it to be. 

If you work in a team, you may be able to turn your 
local network into an Intranet, complete with cross 
platform file sharing facilities and internal mail using 
software that’s entirely free. And, if your local server 
proves to be robust enough, you may decide to take 
the ultimate plunge, dispense with a hosting company 
all together, and put yourself on the Web. 


What is a Web server? 


Let’s be clear right from the start that when we say Web 
server, what we actually mean is a combination of 
software and hardware. When you run the appropriate 
software on your computer it becomes a server, 
whether other computers can access it or not. Asa 
designer you know that Web servers usually enable 
you to publish your pages on the Net. A local server 
does the same thing, but only publishes locally — the 
pages are only accessible through your machine or 
local network. If you’re running server software that is 
ona machine connected to the Net, there may be 
additional security issues to consider, and we'll look > 
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Downloads are available for the Apache HTTP server at 
[w] www.apache.org. Whether you’re on Windows, Mac ora 
UNIX variant, it's free to use and well documented. 


Although there have been two other versions of Windows 


released since the last version of Windows 98 (the SE 
version), there are still plenty of people out there who use it, 
Personal Web Server shipped with the first version of 
Windows 98, but not the second. If you have the first version 
of Windows 98 you can install it from the Windows CD, if not 
it's available to install from the Web. Go to [w] www. 
microsoft.com/ntserver/nts/downloads/recommended/N 
T40ptPk/default.asp and follow the instructions at the site. 
Select Windows 95 as your operating system even though 
you're using Windows 98 SE. After downloading, the 


Windows NT 4.0 Option Pack 


Windows NT Server Home 


a4 NT Server 4.0 for intel (86) 


NT Server 4.0 for Intel (x86) 
NT Server 4.0 for Alpha 
NT Workstation 4.0 for intel (86) 
INT Workstation 4.0 for Alpha 


Product Information 


Technical Resources 
Downloads 


Support 
Related Sites 
Partners 


2000 operating system, 


* Internet Information Server 4.0 
= Microsoft Transaction Server 2.0 
| = Microsoft Message Queue Server 1.0 


Workstation, 
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Windows 98 and Personal Web Server 


ie 
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d click Next 


The Windows NT® 4.0 Option Pack is a set of Web and application services that enables developers to create the next 
generation of distributed network applications for Windows NT Server 4.0 and also take advantage of the Windows 


The Windows NT Option Pack provides the following services for Windows NT Server: 


* Internet Connection Services for Microsoft Remote Access Service (RAS) 


This release of the Windows NT Option Pack also provides the Personal Web Server for Windows 95 and Windows NT 


You can still download Microsoft PWS, but our guess is that the link won't be lasting too much 


at those later. For now, we need to talk a bit about what 
Web servers actually do. 

The backbone of all Web servers is HTTP 
(HyperText Transfer Protocol). Developed by Tim 
Berners-Lee at CERN, the European Organisation for 
Nuclear Research, the first HTTP servers were capable 
of interpreting and delivering static HTML pages only. 
As part of that function they are able to doa standard 
set of things; accept connections from Web browsers, 
retrieve content from a disk, interpret that content and 
decide how to transmit it then, when all that’s done 
send the content back to the Web browser. 

While this capability is still fundamental to Web 
servers, their functionality has expanded overthe 
years and diversified. The first extensions to their 
capabilities came with the introduction of the CGI 
(Common Gateway Interface) protocol; a method that 
enables Web servers to run independent scripts or 
compiled programs in response to a request from a 
Web page. Other standard extensions were added, like 
the secure HTTPS protocol and SSI, the Server Side 
Include standard, along with CGI was the only way to 
create dynamic pages fora long time. 

Modern Web servers usually support this set of 
capabilities by default. They also support other 
protocols according to type. Microsoft's Internet 
Information Server introduced the Active Server Pages 
protocol, then later a set of technologies associated 


installation should start automatically. Click on Typical — 


accept the default path given to you in the next screen, then 


the installer will start copying files. Once you've finished 


you'll be prompted to restart you machine and PWS will be 


running when you get to the desktop. 
Officially, PWS isn’t supported in Windows ME but 


there is a rather long workaround available. Go to 
[w] http://billsway.com/notes_public/| PWS_WinMe.txt 
for full details. Although we've not tried it, some sources 


suggest that these instructions may also work for Windows 
XP Home. 
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More tutorials, server advice and news can be found at another 
internet.com site, [w] www.serverwatch.com. 


with the company’s .NET Web service protocols. Other 
functionality can be plugged into your Web server. 
Support for PHP, a popular Web scripting language, 
can be added to most Web servers for free, as cana 
host of other extras. Which Web server you choose to 
install will depend on which of these extras you need 
to stage your Website, and which operating system 
platform you'll be using. 


Platforms 


It may surprise you to know that you don't need the 
most top-of-the-range machine to run server software. 
Although it depends on what you're planning to do, a 
local Web server that will be used for testing rather 
than publishing online could be set up on the old 
machine in the spare bedroom. If you're ona local 
network, using an older machine enables you to set up 
a dedicated Web server that’s used for nothing else. If 
you're working alone you could choose to install it ona 
new partition on your primary machine. Processor 
power and hard drive space will be considerations if 
your project uses a large, expanding database, but your 
main concern will be which platform to go with. 

Over the last year the operating system market has 
fractured. Let’s take a look at the Microsoft/Intel 
nexus first. Windows XP has replaced Windows 98, 
but although all new PCs have shipped with the 
operating system, lots of older users are still sticking 
with what they know. Windows 98 first shipped witha 
built-in Web server called Personal Web Server, but 
that was missing from the more stable Windows 98 
Second Edition. The standard Home Edition of 
Windows XP doesn't have a Web Server built in either, 
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Webserver Compare rates and reviews the top servers 
available, with handy articles on configuration tips, 
choosing the right server and more. You'll find it all at 
[w] http://webservercompare.internet.com/. 
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PC. With today's host of ever-evolving 
threats from hackers, including 
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Texas Instruments rely on Zone Labs 
technology 
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It’s essential you consider security if your personal machine is going to be running a Web server while connected to the Net 
Windows users can get a personal firewall like ZoneAlarm for [w] www.zonelabs.com. 
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Mac OS X has it's own Firewall, IPFW, built in — but it’s not 
easily configured. Brickhouse from [w] http://personalpages. 
tds.net/~brian_hill/ gives you a graphic interface so you can 
tweak IPFW without launching the console. 


even though it has the same foundation as Windows 
NT (the NT stood for Network Technology towards the 
end of the product's life). There’s a fix though, and we'll 
look at how to install Internet Information Server (IIS), 
Microsoft's turbo-charged Web server on Windows XP 
in our walkthrough on page 84. The Professional 
version of Windows XP comes with IIS. 

PC owners don't have to go with Microsoft, despite 
the company’s claims that users who install alternative 
operating systems are vulnerable to piracy. The Net is 
built on variations of UNIX, from the original Sun 
variety through Linux and FreeBSD. UNIX clones aren't 
the monsters to install that they used to be either. 
These days they come packaged in special 
distributions containing the core operating system, a 
graphical shell and essential tools that can be 
installed as easily as Windows or Mac OS. Although 
Linux and FreeBSD can be found for free online, you 
can save yourself a download and pick up versions on 
CD from [w] www.mandrake.org or [w] www.redhat. 
com. Our sister magazine Linux Format regularly gives 
away Linux distributions on its coverdiscs. There are 
some advantages to building your server around a 
UNIX variant. For one, they're specifically configured 
for networking out of the box. Check out any default 


name your space 


Connect your Web server to the Internet with a fixed domain 
that maps to your dynamic IP address. [w] www.dns2go.com do 
them for $19.95 (£14) a year... 


distribution package like Red Hat or Debian Linux, and 
it will already contain a Web server and additional 
elements that are ready to go. Any additional software 
you're likely to need is usually free to download, 
published under the GNU license. And Linux will run 
far better on an older machine than WinXP will. 

While Microsoft has been making it more difficult 
to run a local Web server, Apple has been making it 
easier. It’s old news that Mac OS X is built around a 
UNIX-like kernel, based on FreeBSD. It also comes 
with the world’s most popular Web server pre-installed 
— the Apache HTTP server. All that’s contained within a 
graphic interface that’s second to none. In one barely 
publicised move, Mac OS went from being one of the 
most difficult OSs to run a Web server from, to the 
easiest solution available. Good news for designers 
and design teams for whom the Mac has always beena 
mainstay. The version of Apache on Mac OS X already 
has CGI capabilities and PHP scripting enabled. 


Server software 


Aside from built-in solutions there are many other 
Web server choices available, most of them free or at 
least inexpensive. Again, the selection you make > 


Server perks 


There are other free perks that 
come along with setting up a Web 
server ona small office network - 
and here are just a few... 


Easy File Transfers — use FTP to transfer files between 
machines. Set up an FTP server on the Web server 
(usually available as an option), then you can upload 
and download files between client machines and the 
server using a standard FTP program. It makes 


transferring large files between Macs and PCs easy. 


Improve communication — Intranets are Websites that 
serve your team with information. Set one up to keep 


yourteam up to date with all the latest developments. 


Shared scheduling — using CGI programs that are free 
to download from the Web you can set up shared 
calendars, message boards and task systems 

without the expense of shelling out fora package 

like Lotus. 


Internal mail - install a small mail server to handle 
email within your organisation. You'll be able to 
send large files between machines by email 
almost instantly, without worrying about your host 


going down 


Shared resources — use your Web server to set up 
directories that are globally accessible to everyone on 
your team, which contain resources that everyone 


needs to use. 


tor those of you working on 
platforms other than 
Windows, you have a bit of 
work ahead of you. However, 
the code can be ported to 
ther operating systems. 
Most of the source is written 
vsing standard ANSI C, Most 


package wil always be the 
most current 
Tins Code was written with 


Running an SMTP server on your network is a cheap 
and efficient way to provide mail in an environment 
with mixed platforms. 
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Connecting to the Web 


If your server's running and you're online, even through a 
dial-up service, you're already connected to the Web. Make 
sure that you take extra care when configuring security 
options and use a firewall on any machine running a server 
that you regularly use to go online with. 

Although your server is technically connected to the 
Web while your machine's online, it’s difficult for others to 
find it. Without being allocated a domain name, your site 
address is simply a collection of numbers that change within 
a range every time you log on. To get your site online 


properly you need to map a dynamic address to those 


Host Search: 


numbers. Services like [w] www.dns2go.com enable you to 
do this. When you go online a program sends your IP number 
to DNS2go - which automatically maps the number to the 
address you registered with them. 

Of course, bandwidth is an issue here. You can't expect 
to be able to serve a graphically intensive site over a modem 
connection. But it's feasible to do so with ISDN, ADSL ora 
cable modem as long as your traffic levels aren't excessive. 
Make sure you're not in contravention of your ISP’s Terms 
and Conditions though, or you could find yourself without 
Internet access pretty sharpish. 
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PHave a site with a long! 
URL? Use a short host 


web, mail, ftp, or any 
server connected your! 
cable, dsl, or dialup 
connection using your 
personal domain 
name 


} Minimize hosting bills 
by hosting your site at 
home or business, 


your domain? 
Use No-IP POP3 and 
Forwarding services, 


D Already running a mail 
server or want to? 
Let No-IP provide 
backup mail 
redundancy or 
reflection for blocked 
port 25, 


Resource Center 


name to redirect to 
your existing site. 


FREE! 
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News Updates 
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Dyn-Update Client 


We have added some new features to the No-IP member section Dynamic DNS hosts and 
web redirects have been merged into one easy to use manager. All of our free domains can 


now be used for dns or url redirection, Enjoy! 


[w] www.no-ip.com offers a similar service to DNS2go, giving you a static URL for your dynamic IP number. 


depends on the type of Website you'll run and the 
environment it will be in. If you're a lone designer or 
you're developing static sites in Windows, 
MyWebServer from [w] www.mywebserverorg is a 
great choice. It’s basic and small, but it’s more than 
adequate for testing purposes and can run CGI 
programs as well as static Web pages. 

Its most interesting feature is that it allows peer-to- 
peer connections, enabling others to connect to your 
server using a fixed address. Security features let you 
restrict access using a password, and visual tools let 
you access the file system of the site from within your 
browser. While MyWebServer is great for beginners or 
small projects, Xitami URL is another compact 
Windows-based Web server solution that’s more 
expandable. There's less hand-holding at the 
installation stage, but it’s more than a suitable for 
Internet Information Server if you're willing to put in 
the work. Xitami can be coaxed to serve PHP pages 
too, with the right additions. 

On the UNIX platforms there are many contenders, 
but only one clear winner. And it’s the one that Mac OS 
X has installed as standard: Apache HTTP Server. Like 
Linux, Apache belongs to a time when programmers 
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Download Sites... 


Many thanks 10 Dan Salazar and Joe Maselli who are now hosting downloads of 
the server. Thanks as well to Surendra Patel (suendra net), Danie Joubert 
(cambar.co.za) and Abdul Trays (westnet ca) for hosting download: 


An alternative to Internet Information Server for Windows 
users, the Pro version of the Sambar Web server even 
has rudimentary ASP support. Get the free version from 
[w] www.sambar.com. 
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Until the advent of OS X, Webstar was the most popular Web 
server on the Mac. Now with two versions available, one aimed 
at OS 9 and a second product fully rebuilt for OS X, it seems an 
expensive anachronism. 


is happy to announce 
ne widely-used, gene 


of PHP 
pting language that is 


Who needs ASP support when you can get PHP for free? The 
latest release of PHP can be downloaded from [w] 
www.php.net. Apache on Mac OS X should have PHP support 
from the moment you switch the server on. 


developed tools they could use collaboratively, using 
the Net to distribute the results. We have a whole 
boxout devoted to the Apache server, and we 
investigate it in more depth in our walkthrough. If you 
want to run Microsoft Active Server Pages, which have 
fast become the dynamic standard on the Web, you'll 
need to add Chili!Soft ASP to yourset up. It runs on 
most versions of Apache HTTP Server (including the 
Windows edition). 

Before Mac OS X, the platform had very few native 
Web servers, and virtually none them were capable of 


Supercategories 


Get Stuff 


aD crucial 


> Introduction to How Web 
Servers and the Internet 
Work 


Sponsored By: 


How Web Servers 
Work 


by Marshall Brain 
»Tell_a friend about this article! 


computers 


Have you ever wondered about the mechanisms that delivered this 
page to you? Chances are you are sitting at a computer right now, 
viewing this page in a browser -- so when you clicked on the link for 
this page, or typed in its URL (Uniform Resource Locator), what 
happened behind the scenes to bring this page onto your screen? If 
you've ever been curious about the process, or have ever wanted to 
know some of the specific mechanisms that allow you to surf the 
Internet, then this edition of How Stuff Works will be a real eye 
opener for you. You will learn about the Internet, and how Web 
browsers and Web servers use it to bring pages into your home, 
school or office. Let's get started! 


combining Web application deployment, except in the 
little used Apple Web Objects format. Now Mac 
support is comparable to FreeBSD and Linux, which 
includes the ability to extend the built-in server's 
existing range of features with add-in modules. PHP 
and PERL scripting support are bundled with the 
Apache distribution that runs on Mac OS X, while 
Microsoft Active Server Pages can be coaxed to run 
using Halcyon software's i(ASP 


Decisions... 


Some of your decisions will be made by the hardware 
you have available, while others will depend on the 
kind of site you want to serve. If you're a designer 
working alone you're more likely to end up going with 
PWS or IIS on Windows or Apache on the Mac. If you 
can't configure the Windows servers to your 
satisfaction, you can use the Windows distribution of 
Apache or a smaller alternative like Sambar from [w] 
www.sambar.com. Larger Mac-based outfits can stick 
with Apache, or configure a Windows machine on the 
network to run Win2000 or WinXP Professional 
Edition to run IIS. The decision really comes down to 
whether you intend to serve ASP pages and how much 
you're willing to learn about Web servers. 

The one area of commercial computing where 
Microsoft doesn't have the market in its pocket is in 
Web serving. Despite aggressive promotion of Internet 
Information Server and its support for Active Server 
Pages, the software giant still only has a 28 percent 
share of the market compared to Apache HTTP And 
that 28 per cent includes all Microsoft Web server 
products, including Personal Web Server sites. 

When compared like for like, it’s difficult to see why 
Microsoft still lags behind. The latest version of IIS — 
version 6 — is secure, easy to configure through a 
graphical interface, fully supports server side XML 
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Add extendable database functionality to your Web site with 
MySQL, an open source, scalable database solution that's ideal 
for Web deployment. Find it at [vw] www.mysql.com. 


through the MS.NET Web application architecture and 
is part of the bundle that includes a built-in SQL 
database server and transaction services. Apache has 
to be manually configured through the editing of text 
files and has no Web app support out of the box. 
Apache HTTP server is ultimately far more flexible 
than Microsoft's offering, which is the real key here. 
You can add ASP. PHP or JSP functionality to Apache if 
you need to, and the server can be configured to work 
with SQL databases. Giving you text file access to the 
configuration of the software enables a degree of 
flexibility missing in Microsoft's offering. What's more, 
Apache runs on Windows, Mac OS and UNIX 
platforms. IIS only runs reliably on Windows 2000, 
Windows NT and Windows XP Professional. 
Whichever solution you choose, setting up a local 
Web server won't only enable you to produce better 
Websites, it'll help you produce faster, more efficient 
sites and enhance your ability to collaborate with 
others. And setting up a Web server locally is a simple 
step away from setting up an online server, side- 
stepping the hassle of using a Web host at all. EES 


Jargon buster 


GNU — one of those circular acronyms, in this case 
standing for GNU’s Not UNIX. It was originally 
developed as a free alternative to the UNIX operating 
system, but the term is now better known in the 
context of the GNU Public Licensing System. 


So ade a ae Ua Fe ie Vn sm 


Less a licensing system than a moral code for the 
sharing of software for free, you can find out more at 
[w] www.gnu.org/philosophy/free-sw.html. 


Distribution — Linux and FreeBSD are composed of 
hundreds of different tools and utilities in addition 
to the kernel of the program. When used as a noun, 
a distribution is a collection of essential tools 
alongside useful extras to create a complete 


operating system. 


SSI - Server Side Includes were an early protocol 
addition to Web servers that allowed developers to 
replace inline content with a command that would 
read that content directly from the server. This enables 
you to insert elements in pages, like the current date, 
server information, text files and the results of CGI 
programs dynamically. 


PERL - Practical Extraction and Reporting Language. 
PERL is a popular scripting language that is used to 
create server-based programs and applications, 
connect to simple databases, as well as return data to 


a Web page. 


MS.NET - Microsoft's set of technologies that are 
based around a Java-influenced compiled 
programming model with an XML data structure. It’s 
used to serve applications directly from Web servers. 
Atthe moment it’s primarily being used for security 
and personal information applications (like Microsoft 
Passport), although it’s eventually envisaged that it 
will be used to replace the programs installed on your 
desktop machine. 
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Part 1: Installing Microsoft IIS on Windows XP Home 


It's a hairy prospect, but there is a method that will enable you to run Internet 
Information Server on Windows XP Home if you have Windows 2000... 


A word of warning 


In its wisdom, Microsoft decided 
to stop support of Personal Web 
Server with Windows XP XP 
Home doesn't include support for 
PWS, but you can install Internet 
Information Server if you have a 
version on CD. You will need the 
Windows 2000 CD to continue 
with this walkthrough. Please 
Note that this information 
involves editing INF files and 
installing an unsupported 
configuration of the software. 
You may not achieve full 
functionality on your machine. 
Consider this before you start; 
you may be better off installing 
Apache HTTP Server or buying 
Windows XP Pro instead. 


Invite your guest 


If your browser doesn't appear to 
find the localhost when you type 
the URL in to the location box, try 
assigning the Anonymous User 
account to the computer's Guest 
account. Go to Start>Control 
Panel and choose User Accounts. 
Ifthe Guest account is off, select 
itand choose Turn on Guest 
Account in the next screen — 
then return to IIS and configure 
Directory Security accordingly. If 
this still doesn't work you can try 
configuring the server with your 
main account — this is the 
configuration we had most 
success with. In any of these 
cases, this security set-up is not 
suitable for use online. It leaves 
your machine vulnerable to 
attack from hackers. 
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Open c:\windows\inf\sysoc.inf in a text editor 

and find the section headed [Components]. 
Locate the line iis=iis.dll, OcEntry,iis.inf,hide,7 and 
change it to iis=iis2.dll, OcEntry,iis2.inf,,7 


To add or remove a component, cick the check box A shaded box mesne that oni 
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Go to the Control Panel and choose 

Add/Remove Programs. Select Add/Remove 
Windows Components. In the list of Windows 
Components you can now install, you should now 
see IIS. Click the Details button and choose World 
Wide Web Server then click OK. 


my You should now have Internet Services 
Manager listed among the available options. 
Double-click to open it. You'll see a console with 
your computer listed as a Web server. Click on your 
computer's name in the left pane. 


Type the name of 8 program, folder, document, or 
Internet resource, and Windows will open it for you. 


Insert the Windows 2000 CD in your 
CD-ROM drive. Create a folder in your C:\ 

root directory called temp. Go to the Start menu and 

choose run. Type in the following command: 

expand d:/i386/iis.dl_ c:/temp/dll2.inf 

where d is the drive letter for your CD drive. 


Windows 


Completing the Windows 
Components Wizard 


You have successfully completed the Windows 
lomponents Wizard. 


To close this wizard. click Finish. 


Windows XP will start the Components Wizard. 


You should be prompted to insert your 
Windows XP Home CD. The installation will take 
some time. When it’s complete, click Finish and 
restart your computer. 


Defau 


~ Anonymous User —- Ss STEER | 
Select the Windows User Account used to access thes computer when an { 
Snonymous user connects to this site. | 
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8 | Right-click on Default Web Site and choose 
Properties. Click on the Directory Security tab. 
In the Anonymous Access and Security Control 

section click on Edit. In the Anonymous User section 


untick the box marked Allow IIS to control password. 
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O=- Of Powaw praes B- 


Open the temp folder on your C drive. Drag 

and drop the newly expanded iis2.dll to 
c:\windows\system32\setup and drop iis2.inf in 
c:\windows\inf. 


Fle Edt Wen Faverltes Tools Help 
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Go to Start>Control Panel. If you're not 

already in Classic View, switch to it by clicking 
Switch to Classic View in the Side Panel. Double- 
click on Administrative Tools. 
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To use a different account, click in the 
Anonymous User section, then Advanced> 
Find Now in the next section. OK all your changes. 
Open your Browser and type in http://localhost/. 


A default page should appear to indicate that your 
server is running. 


Part 2: Starting Apache on Mac OS X 


Apache HTTP Server is already installed on Mac OS X so it's simply a 
question of switching it on and having a nosey around... 


Editing 
configurations 


The Mac OS X text editor, 
TextEdit, has problems saving 
files in proper ASCII format. It 
adds artefacts that can make 
configuration files and scripts 
unreadable. Apache 
configuration files need to be 
edited manually though — so the 
best solution is to use BBEdite 
Lite available from [w] 
www.barebones.com, or to go to 
the console and use Pico from 
the command prompt. 


PC testing 


If your office is entirely filled with 
Macs, it would be worth your 
while to install a low spec 
Windows PC somewhere on the 
network. You can pick up a 500 
MHz PC capable of running 
Windows 98 or XP foras little as 
£250. 97 percent of all Web 
users are PC users — and having 
aPC on your network will let you 
test your pages 
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File Sharing Off 


Click Start to turn on File Sharing and allow 
Public folders. 


Web Sharing On 


Click Stop to turn off Web Sharing and pi 


accessing Web pages in Sites folders. 
f% Allow FTP access 


Allows other users to access 


@ Go to the Apple Menu and launch System 
Preferences, then select Sharing. By default, 
Web Sharing will be off. Switch it on to start the 
Apache Web server. It may take a few moments 
while it starts. Check the box marked Allow FTP 
Access as well... 


@ Mac OS x Personal Web Sharing 


it's so easy that even afiratetimer can do ity Quick Start Guide 

the way, if that describes you, see the sidebar toto Personal Web Sharing 
learn how you can use your word processing 
application to generate HTML documents 
quickly and easily with just a few clicks of a 
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Apache web server 


Apache |s, in a nutshell, a continually evolving 
hunk of server software that’s both free and 
priceless at the same time. One of the absolute 
gerns to emerge out of the open source 
movement, Apache is free in the sense that it's 
not proprietary. Programmers essentially have 
the freedom to do what they want with the 
source code once they have it — provided they 
pass along to other programmers the same 
rights and privileges to change and modify the 
source code that they themselves had when they fer more jaturmation about serving we pages, 
first got their mitts on it bine voter acta nana 
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[4 | If using http://127.0.0.1/ doesn't work, try 
using http://localhost/ instead. This IP number 
is the default loopback number and should work if 
you're running a server on a Mac, Linux or 
Windows machine. 
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You should get a list of environment variables. 

If you switch to the Finder and select Go>Go 
To Folder then go to Library/WebServer/CGI- 
Executables/ you'll find the document test-cgi—a 
simple PERL script. You can find lots of useful scripts 
to download at [w] www.cgi-resources.com. 
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{Autor Print Mal 


Seeing this instead of the website you expected? 


jaus¢ the site administrator has changed the configuration of this web server Pleare contact the 
itaining this server with questions. The Apache Software Foundation, which wrote the web 
4s unng, has nothing to do with maintaining ths site and cannot help resolve configuration issues. 


gp has been mcluded wth thas distnbation: 


he image below on an Apache-powered web server Thanks for using Apache! 
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To see that Apache is working, type 
http://127.0.0.1/ in your browser. You should 
get a page congratulating you on setting up your 
Apache server. Now you can take a look at your 
own user are by typing in http://127.0.0.1/~name/ 
where name is the short user ID for your Mac — not 
your login ID. 
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Computer Home Favorites Applications 


a ri 


Documents Library 


if B 


Music Pictures 


Public 


When you type in http://localhost/~name/ 

—® Apache pulls data from the User area of your 
Mac. You can change the default page by going to 
/Users/name/Sites/ and replacing the index.html 
that’s already there. 


Host: 
User ID: 


Password: 


(9 Add to Keychain 


> 
Shortcuts: 


s 


Py To install your own scripts, it's best to use an 

™ FTP client rather than just drop them in there. 
Start up your FTP client and enter the server address 
as 127.0.0.1. Use your short user ID and password 
to log in. 


Your website here. 


you can use Mac OS X Personal Web Sharing to publish web pages or sh: 
‘on the Internet — or on your company’s (or school's) local area network 
a folder on your hard disk 


‘an display your documents on the Internet — or restrict access to a chos 
ithin a local area network. Mac OS X Personal Web Sharing makes it a sna 


's how it works: Once you're online, all you need to do is copy a file in H 
jat to the Web Pages folder (in the Sites folder in your Home directory, on 
computer's hard disk), and that’s it You're done — your page is ready for 
Ing. Make sure you have someone handy to exchange high fives with 


lo easy that even afirst-timer can do ity Quick Start Guide 

ay, if that describes you, see the sidebar to to Personal Web Sharing 
how you can use your word processing 
cation to generate HTML documents 

ly and easily with just a few clicks of a 


1 Make sure you have a working network 
connection. (Consult your network adn nist 
or other expert if you need assistance.) 


g Again, a placeholder page should display — this 
time one from Apple. From here you can get 
full access to the Apache documentation for your 
server. Take some time to browse through the 
manual before proceeding. 


CGI/1.0 test script report: 


argc is 0. argv is . 


SERVER_SOFTWARE = Apache/1.3.20 (Darwin) 
SERVER_NAME = 127.0.0.1 

GATEWAY INTERFACE = CGI/1.1 
SERVER_PROTOCOL = HTTP/1.1 
SERVER_PORT = 80 

REQUEST METHOD = GET 
HTTP_ACCEPT = */* 

PATH_INFO = 

PATH_TRANSLATED = 

SCRIPT_NAME = /cgi-bin/test-cgi 
QUERY_STRING = 

REMOTE_HOST = 

REMOTE_ADDR 

REMOTE_USER = 

AUTH_TYPE = 

CONTENT_TYPE = 

CONTENT LENGTH = 


py Apache is configured to allow CGI files to be 

@ run directly on your machine, which is handy 
for testing scripts like message boards and mail 
forms. To check that it's working, go to [w] 
http://127.0.0.1/cgi-bin/test-cgi in your browser. 


Set file/folder permissions to: 
‘Search/ 


Read Write Execute 
es @¢ 8 
Group: @ 8 @ 


Everyor: @ G 


Equivatent UNRO™ command "chmod TSS 


Upload any CGI scripts you've found to 

Library/WebServer/CGI-Executables/ with the 
transfer type set to text or ASCII. You may then 
have to set permissions on the file within your FTP 
client to make it executable. In Fetch, you should go 
to Remote>Set Permissions while the file is selected 
to do this. 
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Illustration: Kevin Davison [w] megatron01@btopenworld.com 


Essential Web software 


There are hundreds of Web design solutions for many different tasks. We've rounded up 
some of the best (and worst) tools, both expensive and inexpensive, for you to peruse... 


he world of Web design used to invlove a 

text editor and a lot of patience. Oh, how 

j things change. Today's Web design industry 
j has a choice of software so vast that it’s 

incredibly difficult to decide what to use. There are a 

numerous tasks involved in the Web design process — 

and subsequently software applications to match. 

As faras HTML-creation goes, tools such as 
Dreamweaver and GoLive are very much at the 
forefront — but these alone will not satisfy the 
professional Web designer. A hand-coding tool is 
essential for reducing code to a bare minimum and 
hence making a site load faster. 

Then there's interactivity. Links alone often won't 
wash. There is, of course, the omnipresent Flash, but 
there are also many budget-friendly tools that can do 
a similar job if used with the right application. 

What about Web graphics — essential for crunching 
bitmaps down to a Web-friendly size? Photoshop, 
ImageReady and Fireworks are the market leaders but, 
like all genres of Web design, there are many apps out 
there capable of doing a good job... 


Web authoring and HTML 


Dreamweaver MX 


Price £351 

Company Macromedia 

[w] www.macromedia.com/uk 
System Mac and PC 


Dreamweaver Mx is the latest incaration of 
Macromedia's industry-standard Web authoring 
application. A vast amount of features are here for the 
professional Web designer to get their teeth into, 
including drag-and-drop Web authoring tools, an 
improved coding environment, great integration with 
ColdFusion and extensive built-in reference material. 
UltraDev has now gone. Dreamweaver MX 
combines database and design tools, sporting the 
ability to create Web applications while supporting 
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Dreamweaver MX, the latest version of the industry's favourite 
Web authoring tool, adds database functionality and more. 


PHP. JSP. ASP and .net. XML support is also here — it 
now being possible to edit, validate and import 
schemas. HomeSite for hand-coding HTML is 
included with the PC version, and new template tools 
make it a cinch to control page layout across a site. 

The new MX interface with a revamped Objects 
panel provides easy access to common HTML objects 
as well as SWF and Shockwave files. 

Overall, the new design and development features 
keep DWon top and further it as the complete Web 
design package. See page 8 for more details. 


GoLive 6 


Price £386 

Company Adobe 

[w] www.adobe.co.uk 
System Mac and PC 


Long before Macromedia brought drag-and-drop Web 
authoring to the desktop, Adobe was there with the 
rather unimpressive PageMill, followed by the aquired 
GoLive CyberStudio that was renamed GoLive after the 
aquisition. Adobe began overhauling the app, making 
it more intuitive and adding a vast amount of design 
and developer-orientated features. 

Version 6 sees a new site management tool in the 
form of the Adobe Web Workgroup. This enables 
design teams to maintain sites, making sure pages are 
checked in and out accordingly. GoLive can also 
produce content for a wide range of output devices, 
including WAP (a Nokia WAP emulator ships with the 
product), XML and iMode. 

The package also features a unique Diagramming 
tool for planning your site, and Smart Objects for 
adding native PSD, LIV or Al and then editing them in 
the appropriate Adobe package with a double-click. 

It’s an everything-but-the-kitchen-sink approach to 
Web design — some will like the vast range of features, 
some will prefer the less complicated approach that 
Dreamweaver offers. A demo of GoLive 6is on the CD. 


DD 


Freeway 3.5 


Price £165 

Company SoftPress 

[w] www.softpress.com 
System Mac only 


Print designers used to working exclusively in such 
applications as XPress may crumble at the thought > 
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of creating Websites in an app such as Dreamweaver 
or GoLive. Although XPress now has a variety of tools 
for creating Web-based content, they really don't cut 
the mustard. This is where Freeway 3.5 comes in. 
Sporting an interface similar to that of XPress, it 
enables those print-based designers without Web 
design experience to create entire sites — working in 
way they’re used to. There's no messing around with 
layers to position images correctly and, most inviting 
of all, no code. 

Freeway 3.5 looks and feels much like a DIP 
application. The toolbox will be immediately familiar 
to XPress users, featuring tools for drawing content 
boxes, linking them together as well as various 
transform tools. 

Freeway is all about freedom of design — for print 
designers looking to port their skills to the Web, there 
is no better solution. Even those using Dreamweaver or 
GoLive will no doubt be blown away by its easy of use 
and power. A demo of Freeway 3.5is on the CD. 


EEE 


HomeSite 5 


Price Bundled with Dreamweaver 
Company Macromedia 

[w] www.macromedia.com/uk 
System PC only 


Primarily an HTML editor rather than a Web authoring 
tool, HomeSite can work as either a standalone 
package or in conjunction with design-orientated 
software. But the fact that it’s bundled with 
Dreamweaver MX should give you an idea of just how 
powerful it is. 

Boasting few frills, HomeSite features a drag- 
and-drop window for laying out visual elements, 
although its real power is reserved forthe manual code 
editing tools. The app incorporates a Tag Inspector and 
colour coding for various script types, including 
JavaScript and CSS. It also has support for 
ColdFusion MX. 

Although novices would be better off sticking with 
something a bit more visual, HomeSite endeavours to 
automate as much of the coding as possible. It can 
auto-format scripts quickly, for example, making them 
readable and easier to edit later on. A great package 
for HTML experts. 


Capable of exporting to all manner of wireless formats as well 
as HTML, GoLive 6 is an extremely versatile Web design app. 
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Which file format should you export to? And does it really matter? 
Exporting graphics for use on the Web used to be a matter of JPEG or GIF While these two formats remain very much at the 


centre of Web graphics production, many applications are offering more and more file format support. 


For instance, thanks to the open source SWF format, a plethora of apps now export to SWF — either as a still image or 


animation. This, of course, is vector data though — making it much more download friendly. Adobe has also thrown SVG into 


the equation which, again, is vector data — this offers images that are infinitely scalable when viewed on the Web. 


Applcations such as /llustrator enable you to add JavaScript commands to graphics. 


Then there's PNG — a file format that's gaining more support every day. Turn to page 60 to learn how to master the 


creation of PNG graphics. 


HoTMetal Pro 6 
Price £88 

Company SoftQuad 
[w] www.softquad.com 
System PC only 


Without the advantage of a big name behind it, 
SoftQuad’s HoTMetal Pro has still managed to attract 
a loyal following of fans. Starting life as an HIML- 
crunching text editor, it's now evolved into a full drag- 
and-drop authoring tool, with one of the best HTML 
editing modes of any visual package. 

For most users of HoTMetalL, its sophisticated mix 
of features is the big attraction. In addition to 
WYSIWYG layout windows, code views, browser 
preview mode and CSS views, HoTMetal. supports 
in-line scripting in a variety of languages, Database 
import and Dynamic HTML support. 

You can place chosen elements ona server with 
integrated FTF thanks to the site management tools, 
while some features, such as site-wide search and 
replace, have been ‘borrowed’ from other packages. 
On the whole, this application may be budget, but it’s 
certainly powerful. 


CESESESE 


BeyondPress 4 


Price £235 

Company Extensis 

[w] www.extensis.com 
System Mac and PC 


While Freeway simply mimics QuarkXPress, 
BeyondPress plugs directly into XPress to transform it 
into a Web authoring tool. With this XTension you 
retain all the layout power of QuarkXPress, but with 
additional image conversion, font manipulation and 
hyperlinking utilities for export to HTML. 

The package works in two distinct modes. 
Conversions mode is for pre-existing XPress 
documents when you want to export specific elements 
to a set of pages. Authoring mode is more like working 
with QuarkXPress in its traditional form. But, 
ironically, many of the features restrict rather than 
expand XPress’s functions... 

With advanced functions like the export of 
Dynamic fonts, BeyondPress makes sense if you are 
the kind of designer who spends most of your life 


staring at QuarkXPress. Otherwise, it’s a bit difficult to 
see the appeal. 


pi 


Hotdog Pro6 


Price $100 

Company Sausage Software 
[w] www.sausage.com 
System PC only 


Sausage Software is renowned for being one of the few 
surviving companies to have a Web editor on the 
market for nearly as long as there's been a Web. 
Hotdog Pro is its flagship editing tool — another from 
the school that started as a plain HTML editor and then 
evolved into a code authoring environment. 

Lacking all the drag-and-drop capabilities of 
more design-biased tools, Hotdog is particularly 
canny if you need to work with a variety of languages, 
particularly server scripting and CSS, VBScript 
or JavaScript. 

Hotdog also works with a range of other tools that 
Sausage Software sells separately. These extra 
utilities, costing anything between £10 and £20 
each, provide the extra functionality you might find in 
most drag-and-drop programs anyway. Still, it’s not 
exactly an economical way to build a Web 
development environment... 


OESESE 


Web Menu Builder 2 


Price $49 

Company Visionary Technologies 
[w] www.v-tech.ws 

System PC 


Web Menu Builder is one of an army of small utility 
applications that has arisen in an attempt to make 
the process of adding an intuitive navigational 
feature into your site easy — even if you are the most 
syntax-shy pixel-pusher. 

The interface is clean and intuitive and you'll be 
able to get cracking straight away. That said, the 
generated CSS isn't the most efficient, with duplicated 
code bloating the supporting JScript files and, 


With scripting tools, good QuickTime export options and an AE- 
like way of working, LiveMotion 2is a solid Web animation app. 


to your objects. This is a big update that asserts SWiSH 
as a force in budget Flash-creation tools. 


DDE DIDI 


FlaX 1.31 


Price $40 

Company Goldshell Digital Media 
[Ww] www.goldshell.com 

System PC 


Why does every app like this base its name on file 
formats, usually just adding an ‘x’ at the end? For its 
price, FlaX offers a good range of options for creating 
complex text effects. As with SWfx, the app is based 
on presets, but unlike the Wildform package, FlaX 
enables you to tweak a large range of settings, bringing 
a more individual look to your effects. 

The interface is minimal, with Movie Properties, 
Text Properties and Flag Fx Properties floating on the 
Windows desktop. The latter is the most interesting, 
enabling you to alter the presets to your liking using 
the intuitive sliders and directional buttons. 

You can change text style (outlines, gradient, block 
colour), kerning values and position. The whole lot can 
be easily exported to your site. A cheap, cheerful and 
fun way to knock up SWF text effects in a hurry. 


Dee 


Share and share alike 


LiveMotion 2.0 


Price £175 

Company Adobe 

[w] www.adobe.com 
System Mac and PC 


When LiveMotion was originally launched, it met with 
both excitement and ambivalence from the creative 
community. Some welcomed an alternative to the 
Flash monopoly, while others remained unconvinced 
that the new kid with the rich parents could compete 
against the wisened vector animation master. 

With the new launch, the attraction is undoubtedly 
LiveMotion's new Flash ActionScripting capabilities. 
This not only puts it on a par with the rival application, 
but actually gives it advantages and flexibility. 
ActionScript is part of the SWF SDK — the internal 
scripting language of LiveMotion 2 is actually 
JavaScript — but when a user exports their SWF file, 
LiveMotion 2 converts the JavaScript into 
ActionScript byte code. 

The new scripting engine comes with a cool new 
feature: Live Tabs. These extend and evolve the 
capabilities of automation scripts, to include a custom 
graphical front end that enables the direct 
modification of a process. Other features include 
impressive control over bitmaps, excellent QuickTime 
export and tight integration with Photoshop, Illustrator 
and After Effects. Still no support for shape tweening, 
though — which is odd. 


DED EDI 


Flix 2 


Price $129 

Company Wildform 

[w] www.wildform.com 
System Mac and PC 


When Flix burst onto the scene it was the first tool for 
encoding video into the SWF format ready for 
inclusion in Flash projects. With Flash MX now 
supporting this feature natively, Flix looked set to 
become redundant. But the clever guys at Wildform 
came up with a few ideas to keep Flix alive. The first 
new feature of Flix 2is vectorised video. This enables 


It’s all very well designing it, but how do you get it up there? 
Everyone wants something for nothing — especially designers. If you haven't got the budget to splash out on a tool such as 


Dreamweaver MX or GoLive 6, or in fact anything, don't despair, there are many shareware Web design tools available for 


download — costing as little as $10 to register. 


One such tool is Layout Master 1.1. For just $49, the app includes a feature set much like Freeway 3.5 — enabling the 


designer to drag and drop elements onto a page without having to worry about tables or layers. Find it at [w] 


www.westciv.com. It’s available for Mac and Windows. 


If you're looking for something totally free, you could try PhotoPage 1.4a. This nifty tool is very basic, but enables you to 


create a online image gallery complete with links from a folder on your hard drive. It's available for the Mac and you can 


download it from [w] www.downloads.com. A Web search for free and shareware Web authoring tools throws up hundreds of 


options — have a rootle around and see what you can find. 
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you to create a traced bitmap effect in no time at all — 
something that was previously very time-consuming to 
do in Flash. 

Flix also offers an amazing amount of control over 
output. Bitrate and audio compression is catered for, 
and you can output SWF video so it can be played on 
Flash Player 3-5 as wellas 6. 

Fast encoding coupled with great output quality 
make this a truly awesome tool — it’s just a shame it 
wasn't integrated into Flash itself. 


DiI 


Toon Boom Studio 


Price £233 

Company Toon Boom 

[w] www.toonboomstudio.com 
System Mac and PC 


Toon Boom Studio is the cheaper little brother of 
USAnimation, a long-running standard in the digital 
animation industry. Whereas Flash could be described 
as a Jack-of-all-trades, Toon Boom aims to prove 

its mastery in just one area: online cartoons. To this 
end it virtually ignores interactivity and 
ActionScripting, and concentrates on details such as 
lip-synching, intent on making the production of 
animations as painless as possible. 

One of Toon Boom’s great strengths lies in its 
Scene Planning mode, where depth is added as an 
extra dimension. It uses a series of windows 
reminiscent of a 3D application such as Bryce, with 
top, side and camera views which enable elements to 
be positioned at various distances from the virtual 
camera, with consequent perspective shifts and 
reductions in size. 

Other features include an exposure sheet, vector 
drawing and bitmap, painting tools and automatic 
lip-synching. Flash MX export is also a great feature. 
TBS is a top-notch tool for creating online cartoons — 
see page 55 to win one of five copies. 
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Multimedia, streaming 
video and Web 3D 


Director 8.5 


Price £1115 

Company Macromedia 

[w] www.macromedia.com 
System Mac and PC 


Director has long been the industry standard tool for 
creating interactive CD-ROMs and ‘Shocked’ 
Websites. Director 8.5, however, adds a new dimension 
to the equation in the form of Shockwave 3D. You are 
actually able to use your 3D objects in parts of any 
Director-created multimedia, spin all models, add 
different keyboard and mouse triggers, have them act 
as buttons for links to other markers, and zoom in to 
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Web Menu Builder provides an intuitive and easy way of adding 
complex navigation to your site. Check out your cover CD. 


although these are intelligently optimised, this could 
affect the delivery of yoursite. 

That said, although there are many similar 
applications to be found, few are as easy to use and 
give you such instant results. The interface is logical 
and formatting is straightforward. 

The learning curve is steep, but the generated files 
couldn't be easier to integrate into your site. If the 
thought of editing source code is alien to you but you 
need the functionality of pull-down menus, Web Menu 
Builder could be just the thing you're looking for. You 
can find the full version of Web Menu Builder 7 on the 
cover CD, and a special upgrade offer on page 45. 


CESS) 


QuarkXPress 5 


Price £1287 
Company Quark 

[w] www.quark.co.uk 
System Mac and PC 


In XPress 5, the industry-standard DTP app, you can 
choose between standard print-based documents and 
Web pages. If you choose the Web Document option, 
the Tools palette is joined by an additional palette 
containing imagemap, form controls and other tools. 

However, there's not quite as many Web tools as it 
may at first seem. Once you've decided which 
document type you want to create, they're not 
interchangeable. You can't convert existing print 
documents into Web pages, and vice versa, unless you 
manually copy page items from one document to 
another. It works after a fashion, but it’s hardly elegant. 

This makes XPress 5's Web authoring tools seem far 
less useful than they might have been. However, this 
new feature still has many advantages, many of which 
may become apparent to you more slowly. 

It enables experienced print designers/ XPress 
users to produce Web pages without having to learna 
new set of skills or struggling to work within the design 
and layout limitations of dedicated Web authoring 
packages. If this is you, XPress 5 may be a useful, if a 
little expensive, way of producing Web content. 


DiI 


2D animation and SWF 


Flash MX 


Price £433 

Company Macromedia 

[w] www.macromedia.com 
System Mac and PC 


Flash MX — a demo is on the cover CD — takes the 
package to the next level; the program is now a Web 
GUI creation package, a powerful scripting tool and an 
application authoring environment all in one. This 
overhaul of a favourite program is a significant tool for 
both designers and developers. 

Flash MX looks different the first time you start it. 
As part of the thoughtful handholding Macromedia has 
always incorporated into Flash, you’ll be asked 
whether you're a designer, a developer or a bit of both. 
That's because there’s now so much going on in Flash 
that the interface has been optimised according to 
how you'll use the package. 

One feature of Flash MX that will have you gasping 
is the ability to import video directly into your movies. 
Using Sorenson Spark compression technology, any 
standard video file supported by QuickTime or 
Windows Media Player can be converted, including 
MPEG and AVI. The individual video frames are 
distributed to the Flash Timeline, giving you complete 
control over a clip. They can be scaled, rotated, skewed 
and distorted. You can even create motion tweens 
between individual frames. It's also incredibly easy 
now to create playback controls with the minimum 
amount of ActionScripting. 

Other features include the ability to load images 
and sounds at runtime and a host of new ActionScript 
commands for building online applications. Allin all, 
an essential purchase for any serious Web designer. 


CESSES 


SWfx 2.1 


Price $29 

Company Wildform 

[w] www.wildform.com 
System Mac and PC 


An abundance of mini apps exist for creating complex 
SWF-based text effects without the need for 
ActionScript or in-depth tweening, but SWfxis a little 


tool and an application authoring environment allin one. 


different. Instead of offering real creations tools, as 
Swish does, it offers a huge range of preset animations 
which you can apply to your text with the click of a 
button. But it doesn't give you real control over your 
text-based animations. 

The only settings are BG Colour, Movie Size, Loop, 
Export HTML, Synchronise Letters and some 
protection options. Once you've ploughed through the 
effects list, the package begins to lose appeal. But for 
this meagre sum you do get a variety of text effects 
that look professional. Wildform is constantly updating 
the package, adding many more effects. SWfx is not 
for the designer who wants complete control, but it’s a 
good starting point. 


CSESESE 


3D Flash Animator 


Price $29 

Company Insane Tools 
[w] www.insanetools.com 
System PC 


An SWF-creating application that is something of an 
oddball. Smiley faces, US flags and some peculiar 
icons adorn the grey, textured interface. When you hit 
Create Flash Movie, things get even stranger. After 
determining movie size, frame rate and background 
colour, you're presented with a dialog that fills half the 
screen. When you create new elements — paint, text or 
button objects — you're presented with the tools 
needed ina properties box. 

You can create as many timelines as you wish for 
reasonably complex work, add events and interactivity 
to the elements in a frame including transitions, 
explosions and morphs and swiftly create simple 
games. There are basic 3D tools complete with a four- 
view pane interface, enabling you to create primitives 
and polygons and set up lights and so on. Anapp with 
much potential, but tricky to get to grips with. 


CESESE 


SWiSH 2 


Price $50 

Company DJJ Holdings Pty Ltd 
[w] www.swishzone.com 
System PC 


SWiSH 2 certainly looks set to reinforce the package 
as one of the best non-Flash, Flash tools. It’s no longer 
just a humble text effects creation package. Version 2 
has a variety of features that transform it into a 
complete SWF movie creation application. 

You can now create movie clips — called Sprites — 
import vectors and bitmaps from most major apps, 
create freeform objects using the Bézier toolset, and it 
handles audio files. 

SWiSH lacks the complex scripting tools and 
excellent movie management features of Flash but, 
apart from that point, it is a good competitor, sporting 
an easy-to-use timeline and excellent drawing tools. 
The app comes complete with more than 150 effects 
presets for quickly adding explosions and the like > 
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Flix 2from Wildform enables you to take virtually any movie 
file and encode it as an SWF file ready for editing in Flash. 


the most minuscule detail of a brand new product 
and see it from every angle. But this small list is 
nothing compared to what the new 3D features 
can accomplish. 

Previously, the best way of adding 3D — unless 
you'd learnt all the on-the-fly and extremely complex 
manual 3D creation commands — was to render a 
looping AVI or MOV from your 3D package. Now the 
new W3D format, created internally in Director from 
popular packages like LightWave, 3ds max and many 
more, means that if you can create it, you can also use 
it in the creation of immersive multimedia. There is 
also a fantastic new 3D-to-3D cartoon option, which 
performs similar functions to massively expensive 
cartoon render plug-ins. 

For 2D or 3D games, Websites and any sort of 
interactive media, you can't go wrong with Director. 


DED I 


After Effects 5.5 


Price £617 
Company Adobe 

[w] www.adobe.com 
System Mac and PC 


After Effects is probably the most significant video 
compositing package in its price range. Its ability to 
merge still and video images — from various sources 
— into complex scenes, as well as adding animated 
effects, is well proven. 

Version 5.5 doesn't overhaul any of the package's 
systems or workflows; neither does it make the 
package look different aside from the new Premiere- 
style Effects palette. However, it does expand some of 
the filters and effects, upgrade the masking tools and 
enhance the recently introduced 3D portion of the 
package. It is also OS X-compatible. 

On the Web side of things, you can export your 
compositions as Real, Windows Media and QuickTime 
through cleanerEZ. You can also bring in Flash files 
and use them directly as elements in your 
compositing. This is especially useful in graphical and 
title sequences, or where you're bringing Web and 
video work together and want to produce material 
for both. 


DIDI 


Premiere 6 
Price £480 
Company Adobe 

[w] www.adobe.com 
System Mac and PC 


Premiere dominates its section of the market with a 
massive base of users. It has won its place with a very 
usable interface and good basic editing tools, 
including interactive trimming functions and the ability 
to do batch capturing from any standard FireWire card. 

This is complemented by a range of effects and 
transitions, and v6 brings better control with After 
Effects-style keyframing and adjustments. 

Sound is also handled well in Premiere. Although 
there's no live audio recording available, graphic and 
parametric equalisers are included as standard, which 
are useful for reducing background noise. There's also 
a good audio mixer bundled with the package. 

Output covers the full range of media types, from 
MPEG and DV to Internet formats, which are well 
covered by the integration of a cut-down version of 
cleaner — cleaner EZ. 


ESE 


cleaner 5.1 


Price £492 

Company Discreet 

[w] www.discreet.com 
System Mac and PC 


Delivering streaming video via the Web can be tricky. 
Once video footage is captured and edited, sacrifices 
need to be made to cruch it down to Web output size. 

cleaner 5.1 aims to simplify the process, bringing 
easy to use yet powerful encoding features. You're able 
to encode your footage to a variety of formats including 
Windows media, Real and QuickTime. 

The app can be used in either wizard or manual 
mode, the former guiding you through the encoding 
process delicately, the latter enabling more complex 
operations. Batch encoding is easy, with cleaner able 
to apply the same settings to many files at once. 

cleaner will be a godsend to anyone needing to 
add video content to their Website — it makes the 
process of compressing and optimising video as easy 
as it can be. 


A great tool for creating Web cartoons, Toon Boom Studio 
borrows many of its features from cell-animation techniques. 


Swift 3D 2 

Price $159 

Company Electric Rain 
[Ww] www.erain.com 
System Mac and PC90 


The new version of Swift 3D — a tool for creating 3D 
SWF movies, boasts a wealth of new features, 
improving the original version with a range of 
modelling options and rendering capabilities. It means 
there are even more tools for the seasoned pro. 

The main improvement in version 2 must arguably 
be in the import and export capabilities. Adobe 
Illustrator and EPS files can now be imported with 
their colours maintained, plus 3DS files can now be 
imported along with their previous colour and 
animation settings. Exporting has also been improved 
with support for Al, EPS and the new W3C 
recommended SVG format. 

There is a long list of new modelling features, 
including PostScript font support, improved camera 
and light targeting, automated timeline scaling, and 
non-uniform and numerical positioning of objects. 
Rendering is greatly improved, with cartoon fill 
options, shadow rendering and specular highlights, as 
well as rendering up to 50 times faster while handling 
more than 250,000 polygon models. This tool is for 
anyone wanting to add 3D Flash content to their site. 


DDI 


D Sculptor 2 Pro 


Price £900 

Company D Vision Works 
[w] www.d-vw.com 
System PC 


Creating realistic 3D models of real objects is very 
difficult. In fact, it’s not just difficult, it’s a real pain, 
especially when the shape is complex, rounded or 
organic-looking. 

D Sculptormakes life easier. First you stand your 
object inside a ring of tracker points. These are 
numbered from 1 to 16 and provide a reference from 
which the package can work out where your camera is 
in 3D space. You then take a range of photos (the 
higher resolution the better) of your object. About 10 to 
20 photos are usually needed for a decent model to be 
built. D Sculptor automatically locates the trackers in 
your images. 

From there on, your work is a Photoshop job rather 
than a 3D modelling task. You have to go through each 
image, and mask out the outline of your object. The 
theory is that if you know where the camera was for 
each shot, and you know the shape of the object's 
profile for that angle, you can start to work out the 
object's shape. 

This may sound irrelevant to the Web designer, but 
you can export the finished model as either a W3D file 
for import into Director or a Java applet for distribution 
within an HTML page. A solid release and one that 
enables those unfamiliar with 3D techniques to add 
another dimension to their Web content. > 


ESE 
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FTP-ing it 


It’s all very well designing it, but how do you get it up there? 


While the process of designing your site, is of course, incredibly important (we have dedicated a whole magazine to it, after 


all) actually getting it online is also pretty essential — you do want people to see it, don't you? 


Dreamweaver MX and GoLive 6 have built-in FTP tools for uploading your site to a server. They simply duplicate the 


site structure from your hard drive to a remote server — this way all links should be retained. 


If you'd prefer to use a seperate FTP client (you may have used an alternative Web authoring app) there are many 


available. For Windows, CuteFTPis very popular (see [w] www.cuteftp.com)as is Fetch for the Mac (see [w] http:// 


fetchsoftworks.com ). If you're looking fora free FTP client, Leech FTP for Windows is very competent. 


AXELedge 1.5 


Price £846 

Company Mindavenue 

[Ww] www.mindavenue.com 
System Mac and PC 


AXELedge functions much like a classic 3D package, 
with a quad-view display, a hierarchical object listing, 
animation track editor and parameter box — the 
difference is it outputs to the Web. 

The modelling tools on offer are standard and 
simple to use, while the object-orientated approach 
with a basic construction history keeps it flexible. The 
inclusion of full character animation capabilities, 
complete with IK, FK, constraints, bones and skinning 
is a surprise — there's even a reasonably 
comprehensive particle system. 

AXELedge's Interaction Editor is the key to 
producing interactive scenes. It's a node-based 
display with drag-and-drop connections. Just link 
Sensors (mouse, keyboard, time) to Reactors 
(animations, movies, sounds) and you're almost done. 
The simplicity of this belies the complex effects 
possible, and all without writing a line of code; though 
a full JavaScript-style scripting language is included. 

Publishing to the Web is fully integrated, which 
makes switching between authoring and run-time 
modes or previewing in a browser a doddle. Content 
can be streamed for larger projects, and there’s a 
handy Download Estimate section which can simulate 
download time for a variety of connections. The AXEL 
player is a tiny 750k and works seamlessly with Flash. 


ESESEE 


AXELedge 1.5 looks like a 3D application yet exports to the 
Web. Easy-to-use and powerful, it’s a great Web 3D solution. 
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PhotoCaster 3 


Price $199 

Company Media Lab 
[w] www.medialab.com 
System Mac and PC 


Just as PhotoWebber from Media Lab aimed to speed 
up Web design for Photoshop users lacking in 
Dreamweaver or GoLive-savvy, PhotoCaster 3 aims to 
do the same thing for Director novices. 

Imagine you've just bought Director. You're 
proficient with Photoshop, you have completed a 
layout and want to translate the whole thing over to 
Director, without flattening the image and effectively 
disabling cast members. Go to the Insert menu in 
Director, bring up the PhotoCaster dialog and import 
the whole lot. It’s that simple. 

How can Media Lab charge $199 for this extra? 
We're sure the company will tell us there are highly 
complex algorithms involved, but it still seems pricey, 
considering Director has native support for PSD files. 
Allyou really need is patience and design skill. Handy 
if you're lazy or pushed fortime. 


Web graphics and 
image-editing 


Photoshop 7 


Price £528 
Company Adobe 

[w] www.adobe.com 
System Mac and PC 


The essential image-editing tool for print and Web 
designers, Photoshop features a wide range of tools 
enabling you to retouch photos, create illustrations and 
composite separate images. Version 7 is a good 
upgrade with many new tools and enhancements. 

The first obvious addition to the toolbox is the 
Healing tool — a strange name fora Photoshop tool, 
but an inspired one. The tool works exactly like the 
standard Clone tool, with one major difference — it 
preserves shading, lighting and textures when cloning 
from a source point. This makes it extremely handy for 
touching up digital photos, without creating a smeared 
effect that you may get if using the standard Clone 


tool. The Patch tool is similar but is selection-based in 
its operation. A new painting engine enables you to 
work with realistic, natural-media-esque brushes. 

Photoshop's Web sibling, ImageReady 7, has 
received a few tweaks and enhancements. When 
working with GIF images, you can make any colour you 
wish transparent by hitting the Remap Transparency 
button at the bottom of the Colour Table palette. 

Workflow additions is the File Browser. This is 
probably the best new addition to Photoshop, as it 
provides an easy way for designers to search for files 
by thumbnails, order and even rotate them before 
double-clicking them to bring them into PS. You can 
now even export, using the Save For Web dialog, to 
wireless devices. An essential tool. 


ESSE 


Fireworks MX 


Price £257 

Company Macromedia 

[Ww] www.macromedia.com 
System Mac and PC 


Long the underdog in Web graphics production, beside 
Photoshop, Macromedia's Fireworks is an extremely 
adaptable and somewhat undervalued asset to the 
interactive designer. Its forte is the seamless 
combination of vector and bitmap tools dedicated to 
design at 72dpi/RGB, and presented through an 
incredibly easy workflow. It offers editable vector 
drawing, bitmap paint and effects, one-click DHTML 
behaviours and superb optimisation output. The app is 
also stable, fast and refreshingly bug-free. 

New to MX, apart from the interface overhaul, are 
such features as a refined type tool, photographic 
dodge and burn tools, and a Quick Export feature for 
crunching your graphics down to size. 

For Fireworks MX, Macromedia has heeded this 
philosophy; rather than pack this already-ideal design 
app with crass effects and gizmos, the company has 
focused on making simpler what it’s already got. It will 
help you see your way clearer to a greater Website. 


Paint Shop Pro 7 


Price £94 
Company Jasc 

[w] www.jasc.com 
System Mac PC 


This budget image-editing app from Jasc is packed 
with new time and effort-saving features. It will appeal 
to business and home users and those digital artists 
who need a powerful image editing and painting tool 
on the cheap. At well under the £100 barrier, you are 
getting a lot of features and functions for your money, 
so there's no excuse for printing dodgy scans or 
creating clunky Web graphics. In one package you get 
Web tools, image optimisation with options previewing 
in up to three Web browsers, vector tools with support 
for gradients and textures, type effects and, of course, 
painting, image editing and photo retouching. 


An image-editor that seamlessly combines bitmaps and 
vectors, Fireworks MX is a great companion to Dreamweaver. 


As a bonus, when you buy Paint Shop Pro you get 
Animation Shop 3 for free. This handy app is great for 
creating animations, such has text and graphics for 
video or Web page animations. It’s easy to use and 
features a variety of special effect filters such as 
Motion Blur, Stained glass, and Camera Shake that are 
all animatable. The program is steadily maturing into 
acomprehensive image-editing tool and is real value 
for money. 


DiI 


Photolmpact 7 


Price £105 
Company Ulead 

[w] www.ulead.com 
System Mac and PC 


If you want instant effects, image enhancement and 
correction and quick and easy Web graphics, Ulead’s 
Photolmpact 7 could just be the tool for you. The 
application comes with a library of preset effects, 
images, masks, brushes and even animations. The 
program also has traditional painting tools, layers and 
text tools. 

If you're not too experienced in the field of Web 
graphics, the application will remove a few layers 
of complexity. Most of the Web design tasks are 


Essential set up 


The software you need to build a 
Website or two... 

In order to build a Website, you need software. Here's 
Computer Arts Specials’ recommended list of 


essential kit and what you need it for: 


Dreamweaver MX 
Flash MX 
Photoshop 7 
Illustrator 10 


Web Authoring 
SWF and Web application creation 
Image editing/Web raphics 


Vector graphics 


HomeSite 5 
ColdFusion MX 


Hand coding 
Database development 


handled through wizards — so its pretty simple to 
knock up Web graphics in no time at all. 

If you want a direct image editing tool where you 
can gain the experience in the art of manipulating 
pixels, Photo/mpact is probably not for you. For glitzy 
effects and image enhancement with hardly any effort, 
it’s a competent tool. 


DDL 


Xara Webstyle 2 


Price $81 

Company Xara 

[W] www. xara.com 
System Mac and PC 


Webstyle 2 aims to make the creation of Web graphics 
a breeze, enabling even the most inexperienced Web 
designer to create fully-loaded rollovers, nav bars, 
banner ads, and buttons in a few hours. It’s a cross 
between a corporate PowerPoint presentation and a 
communication model. 

Once you've selected a type of graphic, the 
interface unfortunately becomes a mess. A preview of 
your graphic in both its Mouse Off/On state sits at the 
top, with 22 pages of template designs underneath. 
Once you've selected a graphic, you can customise 
the graphics by changing text, colour, width, spacing 
and texture. 

The same process applies to creating all the graphic 
types. Hitting Save brings up a puny export dialog,to 
optimise the graphics. Hardly cutting edge, but useful 
if your budget is tight and you're not too Web-wise. 


SD 


Photoshop Elements 


Price £69 

Company Adobe 

[w] www.adobe.com 
System Mac and PC 


The main feature of Photoshop Elements is its price — 
forget what it can or can't do fora moment, as this is 
its defining characteristic. At around £70 it’s within 
reach of both consumers and pro artists working on a 
tight budget. That the word Photoshop is in the title is 
also important, as it suggests strong family 
connections. Indeed, Elements shares a lot of the 
core tools found in Photoshop, surprisingly more than 
we expected. 

For image editing, Levels, Hue, Saturation, Invert, 
Brightness and Contrast have all been included as 
Adjustment Layers. However, there is none of the more 
advanced correction tools such as Curves, Colour 
Balance or Selective Colour. But Elements does offer 
you a few unique tools designed for photo retouching, 
such as Fill and Backlight, each of which variably 
correct for under or overexposed areas in an image. 

For image-manipulation on a budget, there is no 
other real choice. 


EES 


FreeHand 10 

Price £328 

Company Macromedia 

[w] www.macromedia.com 
System Mac and PC 


As welLas being a fantastic tool for print, FreeHand 10 
has a whole load of Web functionality up its sleeve. The 
most notable of the new Web features is the Flash 
Navigation Panel, offering designers the ability to 
create an, albeit basic, Flash-based Website directly 
from within FreeHand 10. This is achieved by simply 
assigning links or Flash Actions to graphics that'll take 
the user to another page in your document ora URL. 
So, in theory, you could create a 100-page document 
(thanks to FreeHand’s multi-page support — not yet 
seen in Adobe /llustrator without the aid of a third- 
party plug-in) and link it all together to create a Flash- 
based site. You don't even need to preview the SWF in 
an external Flash Player anymore, thanks to FreeHand 
10’s useful built-in Flash Player window. 

Symbols, introduced in version 9 have been 
improved in v10 with the application now including a 
Flash-esque Symbol Edit window. By double-clicking 
on the selected symbol in the Library, a new window 
appears, in which you can tweak or totally rehash the 
symbol. If you wish to automatically update all the 
instances within your document simply check the Auto 
Update box. 

A great vector tool for Web designers — it’s as 
simple as that. 


DiI 


Illustrator 10 


Price £387 
Company Adobe 

[w] www.adobe.com 
System Mac and PC 


Illustrator 10 is Adobe's tool for creating vector-based 
graphics for both print and the Web. The most striking 
feature of /llustrator 10 is perhaps the Symbolism 
tools. Most other illustration packages enable you to 
save a graphic as a symbol, that is, a template graphic 
sitting in a Library palette to which copies in the layout 
are linked. At last /[lustrator can do this too, keeping 
file sizes smaller and optimising Web layouts 
containing multiple objects (buttons, for example). But, 
additionally, you can pour multiples of your selected 
symbol onto the page as a randomised group, drag 
them around, pull them closer together, then grow, 
shrink and rotate them. 

Other tools enable you to recolour symbols, apply 
transparency, and change their appearance based on 
selections in the Styles palette. Adobe's concept of 
symbolism is quite brilliant, not to mention a lot of fun 
to play with. 

The SWF export stays virtually untouched (apart 
from symbols exporting to the Flash Library) but 
there is great support for SVG (Scalable Vector 
Graphics) and a good amount of improvements to 
the Save For Web dialog. FEES 
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The Website you have just created may look as impressive as a Ferrari, but without an efficient Web 
host it will end up chugging along in the slow lane. Here's our advice on selecting your Web host... 


The perfect host? 


h, choosing the right Web 
hosting service. Now there's 
a task every Web designer 
looks forward to, isn't it? 
Well, no, of course it isn't. In fact, it all 
too often ranks alongside buying a new 
mousepad on the list of priorities. But, 
although it may not inspire you with 
enthusiasm, deciding which Web 
hosting service to use is one of the 
most important Web related decisions 
you have to make. 

“Choosing a Web hosting company, 
can be as easy or difficult as you make 
it,” says Frank Rejwan, COO of Web 
hosting company Host Europe PLC 
([w] www.webhost.com). He compares 
the process to choosing a mortgage 
lender or a new PC, and advises Web 
designers to seriously think about what 
the most important considerations are 


for your specific requirements. As the 
guidelines below indicate, the Web 
host you choose should be able to meet 
all your requirements. 


Make it compatible 


The first step is deciding what type of 
Web host is right for your needs. If you 
are designing small scale sites, then 
shared hosting is for you. Aside from 
free services, shared services are the 
cheapest option available and, 
depending on how much you are willing 
to spend, can provide you with an 
ample amount of Web space. The price 
is kept down because you share space 
on the host’s server with a number of 
other sites. 

However, if your site starts to 
consume too much of a server's 
resources you may be forced to switch 


The perfect Web host may not exist, but the following companies are all heading in the right direction... 


to a dedicated server designed for mid 
to advanced level hosting. A dedicated 
server is, ultimately, just that — a server 
completely dedicated to a single Web 
hosting account. For heavy data-driven 
sites, multimedia and advanced 
e-commerce programs they can 
sometimes be the only effective option. 
Furthermore, if you plan to use 
streaming media, a specialist host, 
such as Webstreaming.com, will 
maximise your playback performance. 


Avoid free services 


Choosing on price alone in most cases 
does not lead to the best Web host. 
“The reality is that if you wanta 
professional set-up, you want to go 
with a professional company, and that 
does mean spending some cash,” says 
Mark Weber, Director of Web design 


1. Claranet 5. NT Webhost 


2. Easynet 3.HostEuropePLC 4. Inweb Networks 
[w] www.clara.net [w] www.uk.easynet.net [w] www.hosteurope.com [w] www.inweb.co.uk [w] www.NTwebhost.co.uk 
[t] 0845 355 1000 [t] 0800 053 4343 [t] 0808 100 6200 [t] 08000 612 222 [t] 0870 747 9047 


Claranet’s hosting services cater for Easynet is a big Web host player The parent company of such high Inweb Networks has been providing NT Webhost specialises in Windows 
NT and 2000 Web hosting for over 
21,000 Websites in the UK. 

The NT Shared Reseller Server 


starts at £44.99 per month which 


simple Websites through to major throughout Europe that mainly profile names as Magic Moments, top notch Web hosting since 1995. 


online operations. provides solutions for businesses. Web Fusion and Dedicated Servers Prices start at £200 a yearforall the 


The Claranet Light Web Hosting Prices start at £199 a yearfora offers flexible and tailored packages —_ usual trimmings. 


option offers IOMB of Web space for _ shared hosting package. to meet all your hosting needs. 


£29.99 per year. Its advanced range Prices start at £9.99 per month fora can include up to 20 Websites. 


starts at £69.99 per month. basic shared hosting package with 


100MB of Web space. 
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agency, Atticmedia ([w] www. 
atticmedia.com). “If you go for free Web 
space you can't expect much — the 
server will be overcrowded, overused 
and under resourced.” It’s also 
important to assess how ‘free’ some of 
these services actually are. “There may 
be hidden fees and they may run 
banner ads on your site,” warns Alastair 
Blackburn, UK manager of Web hosting 
company, Verio ([w] www.verio.co.uk). 


Consider storage 


Storage space is the amount of 
memory you are allocated on the host's 
server to store your Web pages. 25MB 
is sufficient space to house 500 normal 
Web pages with text and images. 
Expect to pay around £15 to £70 per 
month fora 25MB space hosting 
package. However, if you are planning 
to use multimedia applications you will 
need extra space, which inevitably 
raises the cost. You can estimate 

your storage space by finding out 

how much space the site takes up on 
your computer. 


Get the right connection 


To have a smooth-running site you will 
need to use a host with a hassle-free 
connection. If a host is using a leased 
line oran ADSL connection, you may 
be in fora rocky ride. “These 
connections will go down, and the hosts 
are dependent on the likes of BT to 
repair them — which can take a while,” 
warns Atticmedia’s Mark Weber. 


“Ideally they will be connecting directly 
into the Internet backbone itself.” If the 
host is an ISP they will be already 
running their own Internet backbone. 


Scream if you want 
to go faster 


The fastest Internet connection 
possible is always going to be an 
attractive offering for any 
professionally-minded Web designer. If 
you are using a shared hosting 
environment remember that several 
other Websites will be competing for 
bandwidth space. To make sure, ask the 
host if they can guarantee unclogged 
bandwidth available at all times. After 
all, a slow to download site is the 
quickest way to lose custom for 
yourself or your clients. 

According to a 2001 Zona Research 
report, users will bail out if the 
information they request doesn't pop up 
within eight seconds. The same 
research found that slow-loading 
Websites cause online customers to 
abandon up to 50 per cent of online 
transactions. 


Check bandwidth costs 


Some Web hosts charge on the amount 
of bandwidth used. However, most offer 
1000MB for free which is sufficient for 
the average site. That said, images, 
style sheets, MP3 files, video and 

Flash all gobble up bandwidth. Also, the 
more people that look at your Web 
pages the more bandwidth you need. 


NTT/VERIO 


~ global coverage - resellers - contacts & support 


i about us 
copyright © 2001 Verio ~ privacy policy - accepted use policy 


Alastair Blackburn of Web hosting company Verio, [w] www.verio.co.uk, warns that some Web 


hosting companies may charge a hidden fee or run banner ads. 


If you have a large site with lots of 
visitors you not only run the risk of 
having slow download times but could 
be fined or even kicked off many 
hosting services. 


Ask for backup 


Research company Winmark found that 
32 per cent of Web designers consider 
database backups a vital part of a Web 
host's job. If the server goes down, you 
certainly need to know if the Web host 
keeps a backup of everything held. > 


SISOH 43M 


9. Virtual Internet 
[w] www.vi.net 

[t] 020 7460 4066 

A leading European Web host that 


7. Newnet 


[w] www.newnet.co.uk 
[t] 0845 355 4455 
Awide variety of hosting options is 


6. Net Benefit 


[w] www.netbenefit.co.uk 
[t] 020 7336 0567 


For simple and hassle-free Web 


10. Webstreaming 


[w] www.webstreaming.com 
[t] 020 7439 1213 
A UK-based streaming media 


[w] www.verio.co.uk 

[t] 0800 917 9069 

The world’s largest Web hosting 
hosting with no hiddencoststryone _ available to suit most requirements. | company covering 170 countries. 
Prices range from £9.95 to £64.95 
per month fora shared hosting 
facility and £74.95-£149.95 per 


month for a virtual private server. 


even provides a Web Design hosting provider. 


of Netbenefit’s options. Prices range from £50 per annum Referral System designed to help Anentry level package starts at £99 


Prices range from £17 amonthforits to £149 for Newnet’s Business businesses find Web designers. per month and a standard package is 


shared hosting option to £299 for Gold service. Ashared host package starts at£120 £249 per month. 


dedicated hosting. a year for 25MB or the Professional 
Plus account with 350MB could set 


you back just under £2,000 a year. 
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For all you need to know about Web 
hosting, head to the Web Host Directory at 
[w] www.webhostdir.com. 


How does your ISP rate? 
ap te poten Os 


To find out about availability and performance 
of the top sites, take look at Web Perfs at 
[w] www.webperf.com. 


Grill your host 


Put prospective Web hosts 
in the hot-seat with the 
following 20 questions: 


1. How much do your host packages cost? 
2. What exactly is included in the package? 
3. What is the minimum contract period? 
4. |s there a money back guarantee period? 
5. How flexible can the service be if my 
needs change? 

6. What database support is available? 

7 When is technical support available and 
how many people are in the technical 
support team? 

8. How much does technical support cost? 


9. What is your plan if problems arise? 


10. How often do you back up files? 

11. What protection do you take against 
people hacking into files? 

12. What access speeds can | expect? 
13. How much space do | get? 
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Some Web hosts offer reserve or mirror 
servers which automatically switch into 
play if the main server goes down. But 
it’s always best to keep a copy yourself 
just in case. Around the clock intrusion 
detection and Website monitoring are 
also useful add on extras that a Web 
host may offer. 


Check the operating system 


Web hosts have different operating 
systems running on their servers, with 
NT and UNIX being the two main 
programs. If you plan to use a database 
the operating system choice becomes 
very important as the database is either 
compatible with UNIX or NT depending 
on what it was developed for. For 
example, the Microsoft Access 
database must be run on anNT server. 


Weigh up the fees 


Some Web hosts offer discounts if you 
pay for your hosting months in advance. 
Find out how the host charges for Web 
space and check to see if there are any 
extra charges — these could include 
set-up fees, secure transaction costs, 
traffic fees, upgrade fees, multiple URL 
hosting costs and domain name and 
email charges. Also, find out the 
minimum contract period. If you 
subscribe to a long-term deal, ensure 
the Web host is flexible to your needs. 


Check the server is secure 


Aserver should be secure if you are 
designing sites that take credit card 


Net Benefit’s Website provides a 
comprehensive and clear list of what is 
included in its Web hosting packages and if 
any additional charges apply. 


14. What kind of security features are there? 
15. Can | order regular traffic 

analysis reports? 

16. Is it okay to conduct e-commerce? 

17 How many email addresses 

will | receive? 

18. Where is the server stored? 

19. How long have you been in business? 
20. Any added extras? 


To read other people's opinions on some 
of the top Web hosts, head to Epinions at 
[w] www.epinions.com. 


details from customers. This is 
important, not only to be lawful under 
the Data Protection Act, but also to 
keep customers safe. This may cost you 
around £200 per year if it’s not offered 
as part of the hosting package. 


Think down the line 


Ensure the Web host offers scalable 
hosting solutions to meet your long- 
term requirements as your site grows. If 
it’s not easy to upgrade you may find 
yourself with an unnecessary workload 
further down the line. If you have 
e-commerce clients you should also 
check out the global possibilities. “For 
maximised global performance look for 
an operation that has a network centre 
across all major business locations 
worldwide,” recommends Verio's 
Alastair Blackburn. 


Got mail? 


Ideally, a Web host should provide you 
with a full POP-based email account, 
so you or your client can access mail 
anywhere. Find out how many email 
accounts are provided and check to 
see if auto-responders are included 
within the price. Expect to pay around 
£10 to £20 for each extra email address 
you require unless of course you 

have unlimited addresses in your 
hosting package. 


Ask for help 


Alastair Blackburn from Verio advises 
using only ‘best of breed’ suppliers and 
one way of finding out who this includes 
is by asking friends, colleagues and 
even Webmasters running similar sites 
for recommendations. Find out what 
other people think of Web hosts at 
opinion sites such as Epinions 

([w] www.epinions.com). Also, use 
credible hosting directories such as 
Tophosts ([w] http://uk.tophosts.com) 
and The Web Host Directory 

([w] www.webhostdir.com) to search for 
Web hosts according to specific 
criteria such as cost, performance or 
technology. Host Europe's Frank Rejwan 
recommends searching through the 


wenn. toa ta comer 
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To search for hosts according to specific 
criteria, have a look at a directory like 
Tophosts ([w] http://uk.tophosts.com). 


plethora of newsgroups and hosting 
review sites, but he advises to use 
common sense to distinguish between 
review sites that are sponsored, and 
real life experiences of Webmasters 
in online forums and newsgroups. 
Before you commit to a particular 
hosting firm, check out Web Perfs 

([w] www.webperf.net) which provides 
availability and performance results of 
the top hosts. 


Shop around 


Send potential hosting companies an 
email asking for information. As well 
as being able to gauge the quality of 
the response you will also get an idea 
of how quickly a host responds to 
general enquiries. 


Are you being served? 


According to Windmark Research the 
main priority for Web designers is 
technical support, with 46 percent 
considering it vital. Unless you want to 
risk having to listen to Greensleeves for 
five hours while you are left on hold 
find out if the host provides prompt and 
knowledgeable customer care. It is also 
a good idea to find out how much 
service calls will cost you. 

Verio's Alastair Blackburn suggests 
checking the service provider offers a 
full Service Level Agreement and 
whether tailored SLAs can be created 
for high value projects. “Insist on a high 
uptime guarantee, with financial 
penalties for failure to meet targets,” 
he adds. Such research may seem 
like a hassle, but it will help avoid 
future headaches. 


Monitor success 


Once contracts are signed and 
payment is received the Web host will 
make your Web space available (this 
may take between 12 hours and one 
week), and provide you with details on 
how to transfer your Website over to 
them. Once a site is up and running it 
is a good idea to keep an objective 
eye on any hosting difficulties which 
may occur. GEES 


Computer Arts Special Complete 
Web Design — COSB0028 

Design an entire Website in our first 
‘concept’ issue involving some of 
the UK's finest new media talent, 
including Fictitious Egg, Freakish 
Kid, Sprite Interactive, Bigimpact TV 
and Computer Arts’ |eading writers. 
You'll find tutorials and theoretical 
features on every aspect of site 
design from Web games, 
navigation, databases, graphics, 
layout, audio, 3D, streaming video 
and animation. 

CD AxELeage 15, eight essential 
demos including Dreamweaver 4, 
Flash 5 and After Effects 5. 


Computer Arts Special 

Master Illustration - COSB0029 
Acomplete guide for digital artists, 
including 1.01 tips for all 
professional illustrators and 
creative insight from this issue’s 
cover creators, The Designers 
Republic. You'll also find extensive 
features covering all aspects of 
illustration, including vector 
drawing. Plus, 45 pages of in-depth 
tutorials on FreeHand 10, 
CorelDRAW 10, Illustrator, Canvas 
6 and much more. 

CD A full version of Canvas 6, plus 
demos including /i/ustrator 9, 
FreeHand 10 and Photoshop 6. 


arts specialBACk ISSUES 


free in UK 
dd £3 


Computer Arts Special 

100% Photoshop — COSB0030 
Awhole issue dedicated to Adobe 
Photoshop. Included is an eight- 
page in-depth PS7 review where we 
test every new feature of the 
application. If you use Photoshop 
for online images, then you'll need 
our 50 Web graphics tips. Learn the 
art of Scanography with this 
month's cover designer, David 
Newton. Plus, 37 pages of tutorials 
covering PluginMagic, 3D textures, 
animation and much more. 

CD A full version of PluginMagic vol 
1, 10 royalty-free images worth 
£1990, 1250 Photoshop filters. 


Computer Arts Special 

100% Flash — COSB0031 

This issue covers all things Flash, 
including a massive 30 pages 
dedicated to Flash Mx. Also in this 
issue: 38 pages of hot new 
tutorials, covering video, 
screensaver creation and handheld 
game design; 101 Flash tips; the 
new powers of Apple’s coding 
language, ActionScript; an in-depth 
seven-page review of Flash MX; and 
a free 36-page Flash sampler book 
from Friends of ED. 

CD Flash MX demo (dual), Flash 5 
(dual), plus £300 of extras from 
Graphicscene and Web Foundry. 


Computer Arts Special Digital 
video techniques —- COSB0032 
This complete 100-page guide to 
digital video provides you with all 
you need to master creative editing, 
effects and movie making. Included 
in this issue: 50 hot camerawork 
tips; the best hardware and 
software guides; 25 pages of 
essential tutorials, from colour 
retouching to titling; learn how to 
make a claymation film in Premiere; 
and a guide to what's hot in the 
new releases on the DV scene. 

CD A full version of EditStudio 1.5 
(PC), plus demos including After 
Effects 5.5 and combustion 2. 


Issue 66 — Code CA066 
Photoshop filters 

CD QuarkXPress 5 (dual), gmax 
(PC), PhotoStudio 4.0 (dual). 


Issue 67 — Code CA067 

Poser for Pros 

CD Full Poser 3 (dual), EditStudio 
3.0 (PC), PhotoStudio X (Mac). 


Issue 68 — Code CA068 
Painter 7 — with demo 

CD Full Canvas 6 (dual), Font Fx 
Express 2.5 (PC). 


Issue 69 — Code CA069 

Design for DVD 

CD /l/ustrator 10 (dual), U/traDev 
4 demo (dual), ReelDVD 2.5 (PC). 


take outa ‘subscription — see page // 128 77 


Issue 70 — Code CA070 

Think Big 

CD Full Flash Toolbox Lite (dual), 
Flash MX demo, DeBabelizer 5 Pro. 
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Imgae by: Vincent Marcone [e] vincent@mypetskeleton.com 
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bject to change 


In issue 34 of Computer Arts Special... 


Photosho 


‘Techniques for print — better colour, more style 

* Seven for 7: Photoshop artists push version 7 to the limit 
- Matte painting — professional tutorial 

‘Scanner effects — go wild with weird scanning 

* Choose the best hardware for Photoshop 

‘Medical illustration — a new avenue for PS pros 


- What's the best graphics tablet? 


‘Better than Painter? New PS paint tutorial 


On sale Thursday 4 July 


Updates at [w] www.computerarts.co.uk 
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Reserve your copy today 


Ask your newsagent to reserve 
or deliver your copy of 
Computer Arts Special to 

your door every month. 
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fudgestudios 


“You're providing a service -— taking away the client’s troubles.” 
David Eccles explains how his studio keeps the customer satisfied... 


ou're welcome to visit the fudgestudios 
Website, but don't expect a content-rich 
portfolio of this Bolton-based studio's work. 
i Instead, visitors are confronted with nothing 
but a buttonless holding page. 

“We're great with projects for clients, but whenever 
we try to do anything for the studio itself it never quite 
gets done,” says studio founder David Eccles, laughing. 
“The whole site is built, but we keep chopping and 
changing it... we can be a little overcritical.” 

David set up the company three years ago — 
recruiting his brother Andrew last year and more 
recently bringing in Simon Lloyd as consultant — after 
a stint working at a studio designing sports 
merchandise. Prior to that he'd broken into graphic 
design by force of will rather than qualifications. “I 
went to art college and hated it. | spent three weeks in 
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the boozer before leaving. Everybody is more bothered 
about experience, so instead | decided to get a foot in 
the door, first working in textile design and then 
making the move over to graphic work.” 

When the outfit specialising in sports work went 
into receivership, David opened his own studio, finding 
work immediately with the ex-clients of his previous 
employers. “We've dealt with every premier football 
club in the UK via a third party,” he explains. “And now 
we're working directly with the clubs, doing work for 
the likes of Glasgow Rangers, Manchester City and 
Arsenal. For Glasgow we did a full re-brand for all the 
merchandise, working on packaging and in-store point 
of sale. We needed to establish an identity forthem 
that was in keeping with the existing brand. You've 
already got the team crest, but we wanted to create a 
visual identity that people would instantly recognise.” 


Although the initial projects were all sports-based, 
fudgestudios has since branched out. “We're working 
with construction companies, international property 
company DTZ, and other corporate clients, creating 
brand identities, printed literature and illustration work. 
Here it’s all G4s, running Photoshop, Illustrator and 
XPress, and a few other apps likes Streamline,” says 
David. “We use a Linotype L scanner, though printer- 
wise we just have an Epson Stylus for printing roughs.” 

Not one to push a single studio style onto every 
project, David is more concerned with what the client 
wants. “They're paying your bills. You've got to constantly 
try to come up with new things, not just forthe client but 
because the job would just get boring otherwise. Most of 
our work comes by recommendation, so people come to 
us expecting something a bit different.” 

One or two clients can be frustrating, he admits. 
“Unless the client has some understanding of the 
design process, you find yourself having to educate 
them as well. That's actually probably the biggest part 
of this job — trying to show them how it works so that 
you can work together to get results. But then, actually 
dealing with clients is just as important as anything for 
designers. It's no good originating some fantastic work 
if it's not what's wanted...” El 
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LAT L ) The Ideal Tool to Create, 
Espo i Animate & Render Your 3D Scenery! 


Instantly add an ultra-realistic 3D touch to your work! Easily create outstanding stills & animations! 
Save time with Vue d'Esprit's ease of use & extreme productivity. 
Put together photo-realistic master-pieces in a wink. 


Only £169 
Success guaranteed! 


"The program is impressive, cheap, and by far the best tool in its class. S \V F 
Vue d'Esprit is the new king of 3D-landscape renderers" eB \/i 
, go 


Macworld, March 2002 8 


e Sprig 


Get the Free Trial Now! 
Macworld ers 
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TO OOO 


* 3D vegetation of unequaled realism * New ease-of-use interface * Real-time 3D terrain modeling 
* Populate your scenes by directly importing Poser® characters * Z and Alpha Buffers 


* Data exchange with 3D Studio Max®/ LightWave®/ Wavefront® OBJ... (eD ry 
* Ultra-fast, multi-processor rendering * Rocks, stars, planets, stellar effects Kew, 744 
* Full animation, motion blur, soft shadows, blurred reflections and transparencies... 


s 

www.e-onsoftware.com/c3 
i ® Designed for Mac OS X and Windows 95/98/ME/NT4/2000/XP. Vue d'Esprit is a trademark of e-on software, inc. in the USA and/or other countries. info@ e-onsoftware com 
All other brand names, product names or trademarks belong to their respective holders. © Copyright 2002 e-on software, inc. All rights reserved. 


